84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
https://jsfiddle.net/aLq1b11f/
使用swiper进行轮播效果,出现了一个奇怪的问题,不知是不是bug,多次点击切换button之后 ,滑动轮播图,底下的分页小点点就不动了?
业精于勤,荒于嬉;行成于思,毁于随。
之前没用过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 '<span class="' + className + '">' + (index + 1) + '</span>'; } }); return swiper; }
======================目测真的是Swiper插件本身存在的Bug,对同一个swiper重复进行初始化后,Pagination就无法使用了,楼主有空可以在官网那里反馈一下。暂时想到一个解决方案是用两个全局变量来保存两个Swiper的初始化状态,然后根据对应的index和swiper状态来判断是否进行初始化,如果您有更好的解决方案,麻烦也告知一下,谢谢!
$(function(){ var swiper1, swiper2; $("button").click(function(){ var index = $(this).index(); $("body").find('.wrap-container').eq(index).show().siblings('.wrap-container').hide(); if(index === 0 && swiper1 === undefined) { swiper1 = createSwiper(1); } else if(index === 1 && swiper2 === undefined) { swiper2 = createSwiper(2); } }); }); function createSwiper(index){ var swiper = new Swiper('.swiper'+index, { pagination: '.pagination'+index, paginationClickable: true, loop:true, paginationBulletRender: function (index, className) { return '<span class="' + className + '">'+(index+1)+'</span>'; } }); return swiper; }
将var swiper = new Swiper('.swiper-container',{
......
});.swiper-container : 这是class选择器<p class="swiper-container" >这里的swiper-container,是原生样式,所以不能改,你可以把这里换成id="swiper-container-id"<p class="swiper-container" id="swiper-container-id">var swiper = new Swiper('.swiper-container-id',{
......(这就ok了)
});
之前没用过Swiper,专门去官网看了一下demo和API。
楼主的问题不是Swiper插件出现Bug,而是你在createSwiper()函数中,用一个局部变量"var swiper = Swiper()"去创建一个Swiper实例后,再次调用createSwiper()函数时,没有对之前创建的实例进行释放,从而出现问题。
刚才测试了一下,你的方法不清楚会不会造成内存泄漏,但是Pagination在"loop: true"时,会出现计算错误,导致你所谓的bug。
修改如下:
======================
目测真的是Swiper插件本身存在的Bug,对同一个swiper重复进行初始化后,Pagination就无法使用了,楼主有空可以在官网那里反馈一下。
暂时想到一个解决方案是用两个全局变量来保存两个Swiper的初始化状态,然后根据对应的index和swiper状态来判断是否进行初始化,如果您有更好的解决方案,麻烦也告知一下,谢谢!
将
var swiper = new Swiper('.swiper-container',{
});
.swiper-container : 这是class选择器
<p class="swiper-container" >
这里的swiper-container,是原生样式,所以不能改,你可以把这里换成
id="swiper-container-id"
<p class="swiper-container" id="swiper-container-id">
var swiper = new Swiper('.swiper-container-id',{
});