切换多个swiper之后滑动轮播图底下的分页器不动了?

之前没用过Swiper,专门去官网看了一下demo和API。
楼主的问题不是Swiper插件出现Bug,而是你在createSwiper()函数中,用一个局部变量"var swiper = Swiper()"去创建一个Swiper实例后,再次调用createSwiper()函数时,没有对之前创建的实例进行释放,从而出现问题。
刚才测试了一下,你的方法不清楚会不会造成内存泄漏,但是Pagination在"loop: true"时,会出现计算错误,导致你所谓的bug。
修改如下:

$(function() {
  $("button").click(function() {
    var index = $(this).index();
    var swiper;
    $("body").find('.wrap-container').eq(index).show().siblings('.wrap-container').hide();
    **if(swiper !== undefined) {
        swiper.destroy();
    }**
    swiper = createSwiper(1 + index);
  });
});

function createSwiper(index) {
  var swiper = new Swiper('.swiper' + index, {
    pagination: '.pagination' + index,
    paginationClickable: true,
    loop: true,
    paginationBulletRender: function(index, className) {
      return '' + (index + 1) + '';
    }
  });
  return swiper;
}

还有的时候可能宽高不能自适应了,特别是手机的端的,需要重置

 if (navi_swiper !== undefined) {
            navi_swiper.destroy();
        }
        navi_swiper = new Swiper('#swiperTop', {
            pagination: {
                el: '.swiper-pagination'
            }
        })
        **$("#swiperTop"  ).css({"height": screen.height + "px"});** 高度屏幕高度
          **$("#swiperTop"  ).css({"width": screen.width + "px"});**//高度屏幕宽度

你可能感兴趣的:(前端)