Swiper官网
vue中使用方法
我使用的是 “vue”: “3.5.11”，swiper版本为 “swiper”: “11.1.14”， “less”: “4.2.0”
1. swiperjs.com/swiper-api#parameters" rel="nofollow">属性介绍
| 属性名 | 作用 |
|---|---|
| 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. swiperjs.com/swiper-api#event-slideChange" rel="nofollow">方法介绍
| 事件 | 作用 |
|---|---|
| @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,目的获取非响应式swiperlet 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>
