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,目的获取非响应式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>