如何用一个分页创建多个Swiper滑块？

Question

我想用一个分页制作2个滑块。我使用Swiper 2.7.6。

这两个滑块应该有不同的效果。我还没有在官方网页上找到一个例子。我希望它看起来像this。这里是一个代码：

if ($('.photo-slider').length) { 
    $('.photo-slider').each(function(i){ 
     var $this = $(this); 
     //slider ID 
     var id = 'photo_slider_'+i; 
     // $this.find('.slider').attr('id', id); 
     $this.find('.slider').attr('id', id); 
     // pagination 
     var paginationClass = 'pagination-photo'+i; 
     $('.photo-slider').append('<div class="slider-pagination for-photo '+paginationClass+'"></div>'); 

     var $slider = new Swiper('#'+id, { 
      slidesPerView: 1, 
      loop: true, 
      grabCursor: true, 
      calculateHeight: true, 
      pagination: '.'+paginationClass, 
      paginationClickable: true 
     }); 

     $this.find('.slider-arrow').on('click', function(){ 
      if ($(this).hasClass('prev')) { 
       $slider.swipePrev(); 

      } else { 
       $slider.swipeNext(); 
      } 

      return false; 
     }); 

     i++; 
    });   
} 

Answer 1

您是否试图链接Swiper幻灯片的2个单独的实例，只有一组分页/导航？

为什么不在一个实例上设置分页&导航按钮？如果你有他们联系在一起的运动会影响其他。