一个页面引用两个效果，前进后退按钮如何分开控制

刘辉

一个页面，引用了两个基础效果，但 两个前进后退按钮同步控制了，按效果1的后退，效果2也跟着后退。。。
请问，如何修改呢？
代码如下：
<script>
certifySwiper = new Swiper('#certify .swiper-container', {
        watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        loopedSlides: 5,
        autoplay: true,
        navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
        },
        pagination: {
                el: '.swiper-pagination',
                //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);
                        }

                }
        }

});
</script>
<script>
    var swiper = new Swiper('.swiper-zj .swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      slidesPerGroup: 3,
      loop: true,
      loopFillGroupWithBlank: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>

小周WIT

顶一下~~~~~

admin

在控件上加个ID（或者其他类名），通过ID控制就行

pagination: {
        el: '#pagination1',
        clickable: true,
      },
      navigation: {
        nextEl: '#swiper-button-next1',
        prevEl: '#swiper-button-prev1',
      },

zhujinet

很赞很赞很赞