如何用一個分頁創建多個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個單獨的實例，只有一組分頁/導航？

爲什麼不在一個實例上設置分頁&導航按鈕？如果你有他們聯繫在一起的運動會影響其他。