一个html页面多个轮播图,Vue在同一个页面制作多个轮播图

其实很简单，只需要为每个轮播图设置不同的class类和不同的options名即可。

1.设置不同的class类和options名

//轮播图1

// class="swiper-container swiper-pagination1"

// :options="swiperOptionSwiper1"

//轮播图2

//class="swiper"

//:options="swiperOptionSwiper2"

{{item}}

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

}

}

实现的效果图：

轮播.gif

因为第二个轮播图是左右滑动，可能会报下面的错：

这是因为封装好的swiper.js文件中有一个默认事件，

e.preventDefault()只要注释掉该事件即可。

————————————————

以上是摘自我的博客，顺便帮我的博客引流，哈哈哈~

原文链接：https://blog.csdn.net/weixin_43332684/article/details/107424702