iDangero.us Swiper多个实例

我正在尝试在我的网站上添加多个swipers（ http://www.idangero.us/swiper/ ）。 我想添加动态的swipers，所以我为每个swiper使用相同的类。 每个swiper看起来像这样：

 
 
 Slide 1 
 
 Slide 2 
 
 Slide 3 
 
 Slide 4 
 
  
  
 
  

如果我想初始化一个swiper一切正常使用此代码：

 var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', paginationClickable: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', loop: true }); 

我想要的是在一个页面上实例化多个swipers，如下所示：

 var swipes = []; $('.swiper-container').each(function(i, obj){ swipes[i] = new Swiper(obj, { pagination: '.swiper-pagination', paginationClickable: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', loop: true }); }); 

但这对我不起作用。 我认为这些特性会引发问题。 也许我应该做这样的事情更具体，只是在当前的swiper内使用pagination / nextButton / …而不是整个网站：

 pagination: obj + '.swiper-pagination', paginationClickable: obj + '.swiper-pagination', nextButton: obj + '.swiper-button-next', ... 

但我不知道该怎么做。 我怎样才能做到这一点？

Answer 1

你需要做类似的事情：

 $('.swiper-container').each(function(){ new Swiper($(this), { pagination: $(this).find('.swiper-pagination'), paginationClickable: $(this).find('.swiper-pagination'), nextButton: $(this).find('.swiper-button-next'), prevButton: $(this).find('.swiper-button-prev'), loop: true }); });