一个html里面写两个swiper,一个页面多个swiper，变现不同，第二个没有效果了，而且后面的参数配置会影响上一个的配置...

@yixinagqingyuan 解决了，用了原生的，自己的封装了一个组件，个人也是看到了一些网上的例子，要求是声明对象的时候，要给不同的根容器

引用部分

import swiper from '@/components/swiper'

import { addClass, removeClass } from '@/utils/index'

export default {

components: {

swiper

},

data() {

return {

swiperOption1: {

speed: 200,

loop: true,

autoplayDisableOnInteraction: false,

preventLinksPropagation: true,

effect: 'fade',

autoplay: {

delay: 10000 // 5秒切换一次

},

pagination: {

el: '.swiper-container1 .swiper-pagination'

},

on: {

slideChangeTransitionStart() {

removeClass(document.querySelector('.swiper-container1 .swiper-slide-active'), 'animated')

},

slideChangeTransitionEnd() {

addClass(document.querySelector('.swiper-container1 .swiper-slide-active'), 'animated')

}

}

},

swiperList1: [

{

src: 'http://m.youmeitu.com/Upload/20190415/1555306123444903.jpg'

}, {

src: 'http://img95.699pic.com/photo/50055/5642.jpg_wh300.jpg'

}, {

src: 'https://pic1.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_1200x500.jpg'

}, {

src: 'http://img95.699pic.com/photo/50062/8783.jpg_wh300.jpg'

}

],

swiperOption2: {

speed: 400,

loop: true,

autoplayDisableOnInteraction: false,

preventLinksPropagation: true,

effect: 'fade',

autoplay: {

delay: 3000 // 3秒切换一次

},

pagination: {

el: '.swiper-container2 .swiper-pagination'

},

on: {

slideChangeTransitionStart() {

removeClass(document.querySelector('.swiper-container2 .swiper-slide-active'), 'animated')

},

slideChangeTransitionEnd() {

addClass(document.querySelector('.swiper-container2 .swiper-slide-active'), 'animated')

}

}

},

swiperList2: [

{

src: 'http://img95.699pic.com/photo/50055/5642.jpg_wh300.jpg'

}, {

src: 'https://pic1.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_1200x500.jpg'

}

],

swiperOption3: {

speed: 400,

loop: true,

autoplayDisableOnInteraction: false,

preventLinksPropagation: true,

effect: 'fade',

autoplay: {

delay: 5000 // 5秒切换一次

},

pagination: {

el: '.swiper-container3 .swiper-pagination'

},

on: {

slideChangeTransitionStart() {

removeClass(document.querySelector('.swiper-container3 .swiper-slide-active'), 'animated')

},

slideChangeTransitionEnd() {

addClass(document.querySelector('.swiper-container3 .swiper-slide-active'), 'animated')

}

}

},

swiperList3: [

{

src: 'https://pic1.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_1200x500.jpg'

}, {

src: 'http://img95.699pic.com/photo/50062/8783.jpg_wh300.jpg'

}

]

}

}

}

我的里面加了一些特效，所有有增加和减少class来完成的，不需要可以去掉，希望可以帮助到你