Swiper中文论坛

标题: 一个页面引用两个效果，前进后退按钮如何分开控制 [打印本页]

作者: 刘辉 时间: 2018-10-15 11:18
标题: 一个页面引用两个效果，前进后退按钮如何分开控制
一个页面，引用了两个基础效果，但两个前进后退按钮同步控制了，按效果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 时间: 2018-10-15 14:05

顶一下~~~~~

作者: admin 时间: 2018-10-16 10:15
在控件上加个ID（或者其他类名），通过ID控制就行

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

作者: zhujinet 时间: 2018-10-16 13:06
很赞很赞很赞

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)