切换多个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 '<span class="' + className + '">' + (index + 1) + '</span>';}});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"});**//高度屏幕宽度

切换多个swiper之后滑动轮播图底下的分页器不动了？相关推荐

vue纵向轮播_vue滑动轮播图插件vueswiper
插件描述:vue滑动轮播图插件,支持移动端拖拽滑动 vue-concise-slider,一个简单的滑动组件,配置简单,支持自适应/全屏+按钮+分页,同时兼容移动端和PC端版本 v2.1.2 支持v ...
html 轮播图_JS拖拽专题(二)——「实战」滑动轮播图的那点事儿
欢迎来到我的JS拖拽专题系列文章,更多精彩内容持续更新中,欢迎关注 :) 上一章节我们说到了在js中拖拽的基本原理,即我们在鼠标按下的时候计算出鼠标位置和物理的位置的差值,这个差值在移动的过程中不恒定 ...
siwper vue 上下滑动分页_支持移动端的vue滑动轮播图插件vueswiper
一款支持移动端的vue滑动轮播图插件vueswiper,演示页面给出了5中范例:基本例子.垂直滚动.不定宽度.无缝循环滚动.多层级滚动,每一种都可以通过鼠标拖动图片来滑动,可以点击按钮来增加页面查看效 ...
php滑动轮播效果,js实现移动端手指滑动轮播图效果
本文主要为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. 如下所示: Document html{heigh ...
flutter CustomScrollView中使用Swiper做轮播图问题
有朋友问我CustomScrollView中使用Swiper做轮播图问题以前没这么用过,也是才发现CustomScrollView 与 Swiper 冲突,直接报错. 网友说修改源码,试过不能用,但 ...
在vue项目中使用v-show控制元素隐藏导致swiper的轮播图及分页无法正常显示
一.需求问题在之前的项目开发中,使用了swiper插件.由于是vue项目,对于swiper的轮播图我们使用了v-show命令,进行动态隐藏与显示.只有当点击进行一些操作以后,swiper的轮播图才会 ...
【uniapp】swiper 自定义轮播图指示点
前言调试基础库 2.12.0 微信开发者工具 1.03.2008270 uniapp 开发者工具 HBuilderX 2.9.8 uni-swipper-dot uniapp官方推荐的swiper组 ...
微信小程序使用swiper制作轮播图留白的解决方法
微信小程序相比网页制作轮播图快捷了很多,直接可以使用swiper标签,但是对于新手来说,也有很多不可避免的坑. 附上轮播图代码 <view class="swp">&l ...
切换效果：coverflow 封面轮播图
文章目录前言一.最终效果二.swiper库的引入三.代码复现 1. html主体 2. css样式 3. js脚本总结前言 coverflow封面轮播图主要常用在一些音乐播放网站,或者视频 ...

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

切换多个swiper之后滑动轮播图底下的分页器不动了？相关推荐

最新文章

热门文章