轮播图分页器HTML结构,【Web前端问题】切换多个swiper之后滑动轮播图底下的分页器不动了?...

当使用Swiper实现轮播效果并遇到切换后分页器不动的问题时,可能是因为未正确释放Swiper实例。文中提供了解决方案,包括在切换时销毁之前的Swiper实例,以及通过设置不同的pagination标识避免冲突。此外,还有其他开发者分享的解决思路,如使用全局变量保存Swiper状态,以及修改pagination元素的选择器以区分不同轮播图。
摘要由CSDN通过智能技术生成

使用swiper进行轮播效果,出现了一个奇怪的问题,不知是不是bug,

多次点击切换button之后 ,滑动轮播图,底下的分页小点点就不动了?

8b40a26d44f8a5582f0e8289c64c7630.png

回答:

之前没用过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 !== undef

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值