Swiper中文论坛

标题: swiper 页码器问题 [打印本页]

作者: 小小志 时间: 2015-4-30 17:41
标题: swiper 页码器问题
本帖最后由小小志于 2015-4-30 17:49 编辑

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

QQ截图20150430172439.png (48.68 KB, 下载次数: 121)

作者: admin 时间: 2015-4-30 19:25
试一下每个分页器用不同的标签

<script language="javascript">
var mySwiper = new Swiper('#swiper-container1',{
pagination : '#swiper-pagination1',
})
var mySwiper2 = new Swiper('#swiper-container2',{
pagination : '#swiper-pagination2',
})
</script>

复制代码

作者: 小小志 时间: 2015-5-4 13:31

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

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

作者: 小七 时间: 2015-5-13 18:01
少量应该怎么写啊，谢谢

作者: 小七 时间: 2015-5-13 19:29
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));
});
搞定，可参考上面的代码，往里面传值

作者: 小七 时间: 2015-5-13 19:34
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));
});
忘记优化了

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