1. swiper使用版本
"swiper": "^7.4.1",
2. swiper 引入
/ 引入swiper样式(按需导入)
import "swiper/css";
import "swiper/css/pagination";
// 引入swiper组件
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper";
3. 组件间使用
<swiper
class="swiper"
ref="swiper11"
:slides-per-view="6"//展示多少个slides
:space-between="10"//slides间的间隔
:observer='true'
:observeParents="true"
:centeredSlides="true"
:loop="true"//是否循环播放
:modules="modules"//模块配置
:looped-slides="6"//前后复制的slides数量
:speed="1000"
:autoplay="autoConfig.info"
slidesOffsetBefore="-776"//偏移的距离
:slideToClickedSlide= "true"//点击slides时候跳转到当前slides
:pagination="{ clickable: true }"
@swiper="onSwiper"//初始化slides时候操作
@slideChange="onSlideChange"//自动播放时候事件改变事件
@click="onClick"
>
<swiper-slide
v-for="(item, index) in images"
:key="item.id"
>
111
</swiper-slide>
</swiper>
4. swiper配置
const modules = [Autoplay, Pagination]; //Autoplay 自动播放 Pagination 分页
//自动轮播配置
const swiperCur = ref(null);
const onSwiper = (swiper) => {
console.log(swiper);
swiperCur.value = swiper;//获取到当前的swiper
};
const autoConfig = reactive({
info: {
delay: 3000, //间隔时间
disableOnInteraction: false, //设置为false,用户交互(滑动)后自动播放不会被禁用,每次交互后都会重新启动
reverseDirection: false, //是否反方向轮播
stopOnLastSlide: false, //执行到最后
pauseOnMouseEnter: true, //鼠标输入时暂停
},
});
const onSlideChange = (swiper) => {
// swiper是当前轮播的对象,里面可以获取到当前swiper的所有信息,当前索引是activeIndex
};