swiper 页码器问题

小小志

如图所示，现在的情况是，我在一个页面可能有多个swiper，每个swiper都需要有分页器，那么问题来了，当页面中所有swiper都初始化后，分页器只作用于最后一个初始化的swiper，也就是说当页面进来后，第一个Swiper初始化后分页器也形成了，然后第二个Swiper初始化后分页器也形成了但是这个时候分页器是显示覆盖第一个Swiper的分页器，就出现了如图所示的情况，第二块Swiper的分页器没有 swiper-pagination-bullet-active这个标签 ，这时候第一块Swiper中的分页器是作用于第二块的swiper的。

小七

var doArtSwiper = function(e,i){
  var artOption = {
    pagination: '#swiper-pagination' + i,
    loop: true
  };
  e = new Swiper('#' + e, artOption);
};
$('.qir').each(function(){
  doArtSwiper($(this).attr('id'),$(this).attr('id').charAt($(this).attr('id').length-1));
});
忘记优化了

小七

var doArtSwiper = function(e,i){
  var hh = '#swiper-pagination' + i;
  console.log(hh);
  var artOption = {
    pagination: hh,
    loop: true
  };
  artOption = Math.abs(window.orientation) === 90 ? $.extend({
    spaceBetween: 8,
    slidesPerView: 2,
    centeredSlides: true
  }, artOption) : artOption;
  e = new Swiper('#' + e, artOption);
};
$('.qir').each(function(){
  var e = $(this).attr('id');
  doArtSwiper(e,e.charAt(e.length-1));
});
搞定，可参考上面的代码，往里面传值

小七

少量应该怎么写啊，谢谢

小小志

admin 发表于 2015-4-30 19:25
试一下每个分页器用不同的标签

少量确定的swipe可以用这种方法，如果swipe的个数不确定的话就难了

admin

试一下每个分页器用不同的标签

1. <script language="javascript">
   
2. var mySwiper = new Swiper('#swiper-container1',{
   
3. pagination : '#swiper-pagination1',
   
4. })
   
5. 
   
6. var mySwiper2 = new Swiper('#swiper-container2',{
   
7. pagination : '#swiper-pagination2',
   
8. })
   
9. </script>

复制代码