其实很简单,只需要为每个轮播图设置不同的class类和不同的options名即可。
1.设置不同的class类和options名
//轮播图1
// class="swiper-container swiper-pagination1"
// :options="swiperOptionSwiper1"
<swiper :options="swiperOptionSwiper1" class="swiper-container swiper-pagination1" ref="mySwiper">
<swiper-slide v-for="item in carousel">
<img class="banner-img" :src="item" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
//轮播图2
//class="swiper"
//:options="swiperOptionSwiper2"
<swiper class="swiper" :options="swiperOptionSwiper2">
<swiper-slide v-for="item in 10">{{item}}</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
2.为每个不同的options配置不同的内容
swiperOptionSwiper1: {
pagination: '.swiper-pagination1',
slidesPerView: 1,
spaceBetween: 30,
centeredSlides: false,
spaceBetween: 0,
onSlideChangeEnd: swiper => {
this.page = swiper.realIndex+1;
this.index = swiper.realIndex;
},
autoplay:{
delay:2000,
disableOnInteraction:false
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
loop:true
},
//options名为swiperOptionSwiper2的配置
swiperOptionSwiper2: {
slidesPerView: 3,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true
}
}
实现的效果图:
因为第二个轮播图是左右滑动,可能会报下面的错:
这是因为封装好的swiper.js文件中有一个默认事件,
e.preventDefault()只要注释掉该事件即可。
————————————————
以上是摘自我的博客,顺便帮我的博客引流,哈哈哈~
原文链接:https://blog.csdn.net/weixin_43332684/article/details/107424702