vue3中swiper11的使用
Swiper官网
vue中使用方法
我使用的是 “vue”: “3.5.11”，swiper版本为 “swiper”: “11.1.14”， “less”: “4.2.0”
1. 属性介绍
| 属性名 | 作用 |
|---|---|
| slidesPerView | 设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（小数不可loop），或者 'auto’则自动根据slides的宽度来设定数量。 |
| autoplay | autoplay:{ delay: 2000 ,disableOnInteraction: false }；❤️autoplay为自动切换函数；❤️ delay：轮播项的延迟时间；❤️ disableOnInteraction：用户操作之后时候禁止自动切换。 |
| navigation | 使用前进后退按钮来控制Swiper切换。 |
| pagination | pagination=“{ type: ‘bullets’, clickable: true }” ；❤️pagination：使用分页器导航；❤️type：分页器样式；❤️clickable是否可点击跳转到对应图片。 |
| pagination | scrollbar=“{ draggable: true }” ❤️scrollbar：设置滚动条，❤️draggable：该参数设置为true时允许拖动滚动条 |
| direction | Swiper的滑动方向，可设置为水平方向切换 horizontal / 垂直方向切换 vertical |
| space-between | 在slide之间设置距离（单位px） |
| modules | 在项目中引入swiper 时，需要用到的 Swiper 模块 |
2. 方法介绍
| 事件 | 作用 |
|---|---|
| @swiper | 事件函数，返回swiper实例 |
| @slideChange | 事件函数。在当前Slide切换到另一个Slide时执行(activeIndex发生改变)，一般是在点击控制组件、释放滑动的时间点 |
3. 代码示例
<template>
<div class="swiper">
<swiper
:slidesPerView="1"
:autoplay="{ delay: 2000, disableOnInteraction: true }"
:navigation="true"
:pagination="{ type: 'bullets', clickable: true }"
:scrollbar="{ draggable: false }"
:space-between="0"
:modules="modules"
@mouseenter="enter"
@mouseleave="leave"
@swiper="onSwiper"
@slideChange="onSlideChange"
>
<swiper-slide v-for="(item, index) in props?.swiperImgArray" :key="index" class="swiperItem">
<img :src="item.img" alt="" />
</swiper-slide>
</swiper>
</div>
</template>
<script setup lang="ts" name="AutoSwiper">
import { toRaw } from "vue"
import { Swiper, SwiperSlide } from "swiper/vue"
import "swiper/css"
import "swiper/less/navigation"
import "swiper/less/pagination"
import { Autoplay, Navigation, Pagination, Scrollbar, A11y } from "swiper/modules"
interface Item {
img: string
}
const props = defineProps<{ swiperImgArray: Item[] }>()
let modules = [Autoplay, Navigation, Pagination, Scrollbar, A11y]
//定义swiperNew,目的获取非响应式swiper
let swiperNew: any
//鼠标移入
const enter = () => {
swiperNew.autoplay.stop()
}
//鼠标移出
const leave = () => {
swiperNew.autoplay.start()
}
const onSwiper = (swiper: any) => {
// console.log(swiper);
swiperNew = toRaw(swiper) //拿到swiper对象再转换为非响应式
}
const onSlideChange = () => {
// console.log("slide change");
}
</script>
<style lang="less" scoped>
.swiper {
width: 100%;
height: 100%;
img {
width: 100%;
height: 100%;
}
.swiperItem {
// border: aqua solid 1px;
// height: 200px;
}
}
:deep(.swiper-pagination) .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: rgb(229, 127, 141);
}
:deep(.swiper-pagination-bullet) {
//修改分页器圆点大小
width: 8px;
height: 8px;
background-color: #fff;
}
.swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
:deep(.swiper-pagination-horizontal.swiper-pagination-bullets) .swiper-pagination-bullet {
// 分页器远点之间的距离
margin: 0 10px;
}
:deep(.swiper-button-prev),
:deep(.swiper-button-next) {
color: rgb(229, 127, 141);
}
</style>
swiper