swiper为什么失效,tab切换了一下,不能自动播放了

加上这个observer:true, observeParents:true也不可以

    var newSwiper = new Swiper ('.swiper-second', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        pagination: {
          el: '#swiper-two',    // 如果需要分页器
          clickable :true,
        },
        observer:true, //修改swiper自己或子元素时,自动初始化swiper
        observeParents:true, //修改swiper的父元素时,自动初始化swiper  
        autoplay: {
           delay: 1000, //时间 毫秒
           disableOnInteraction: true //用户操作之后是否停止自动轮播默认true 
       }
    })  

    var nextSwiper = new Swiper ('.swiper-third', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        pagination: {
          el: '#swiper-three',    // 如果需要分页器
          clickable :true
        }, 
        observer:true, //修改swiper自己或子元素时,自动初始化swiper
        observeParents:true, //修改swiper的父元素时,自动初始化swiper 
        autoplay: {
           delay: 1000, //时间 毫秒
           disableOnInteraction: true  //用户操作之后是否停止自动轮播默认true 
        }
    })  

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)

你期待的结果是什么?实际看到的错误信息又是什么?

阅读 6.3k
3 个回答
新手上路,请多包涵

亲~把这个注释掉就可以了哦 disableOnInteraction: true 。默认是true也不可以哦~必须注释掉才可以哦~看到答案的话回句话啊:)

新手上路,请多包涵

点击tab切换的时候重新初始化swiper

新手上路,请多包涵

var certifySwiper = new Swiper('#certify .swiper-container3', {

direction: 'horizontal',
watchSlidesProgress: true,
slidesPerView: 'auto',
centeredSlides: true,
observer:true,
observeParents:true,
loop: true, autoplay: true,
loopedSlides: 5,
autoplay: {
  delay: 2500
},
navigation: {
    nextEl: '.swiper-button-next3',
    prevEl: '.swiper-button-prev3',
},
pagination: {
    el: '.swiper-pagination3',
    clickable :true,
},
on: {
    progress: function (progress) {
        for (i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i);
            var slideProgress = this.slides[i].progress;
            modify = 1;
            if (Math.abs(slideProgress) > 1) {
                modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
            }
            translate = slideProgress * modify * 260 + 'px';
            scale = 1 - Math.abs(slideProgress) / 5;
            zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
            slide.transform('translateX(' + translate + ') scale(' + scale + ')');
            slide.css('zIndex', zIndex);
            slide.css('opacity', 1);
            if (Math.abs(slideProgress) > 3) {
                slide.css('opacity', 0);
            }
        }
    },
    setTransition: function (transition) {
        for (var i = 0; i < this.slides.length; i++) {
            var slide = this.slides.eq(i)
            slide.transition(transition);
        }

    }
}

})

这个轮播插件为什么切换的时候滑动效果失效呢,有解决办法没

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题