swiper在 swiper-container正常状态下显示,轮播是没有问题,但是当 swiper-container由隐藏切换至显示时(比如做图片查看时)会出现滑动bug,滑动卡顿而且最后一张可以移出可视区域,

出现问题的原因是分页器没有更新,所以要监控分页器的状态,官方提供一个属性 observe(observeParents)默认值false,修改为true即可,在切换container显示隐藏时便会回归正常。

这个问题官网提供了解决的方法,只需要设置一个属性就行,代码如下:

var mySwiper = new Swiper('.swiper-container', {
observer:true,//启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper })

官方链接:http://3.swiper.com.cn/api/Observer/2015/0308/218.html

swiper.js在隐藏/显示切换时,轮播出现bug的解决办法的更多相关文章

  1. 【转】Android Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    重构了下之前自己的一个新闻客户端,全部使用了Fragment来进行页面切换,只有一个入口Activity作为程序的启动Activity,其中有一个界面需要调用摄像头识别二维码, 于是就会用到Surfa ...

  2. springMVC+Mybatis(使用AbstractRoutingDataSource实现多数据源切换时)事务管理未生效的解决办法

    业务场景: A.B两个单位,系统部署同一套代码: A.B两系统能相互访问: 要求将数据从A系统同步到B系统,再将反馈信息回发给A: 实际开发情况: 因为系统比较小,最开始设计架构的时候没有考虑到消息互 ...

  3. [Android Pro] Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    方法一.在Activity的onCreate中添加如下代码 getWindow().setFormat(PixelFormat.TRANSLUCENT); reference to :  http:/ ...

  4. VMware(Caps Lock键)切换大小写作用失效的Bug的解决办法

    前言 第一种情况是:进入VMware虚拟机的时候,即使按了Capslock键开启大写,灯虽然亮了,但是,打出来的字母还是小写,没有有任何的效果,根本不能转换成大写. 只有按Shift+字母才能输入大写 ...

  5. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  6. JS图片自动和可控的轮播切换特效

    点击这里查看效果:http://hovertree.com/texiao/js/1.htm HTML文件代码如下: <!DOCTYPE html> <html xmlns=" ...

  7. JS案例之2——cycle元素轮播

    元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: <!DOCTYPE html> <html&g ...

  8. jQuery+html5实现的3D动态切换焦点轮播幻灯片

    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...

  9. vue.js学习之better-scroll封装的轮播图初始化失败

    vue.js学习之better-scroll封装的轮播图初始化失败 问题一:slider组件初始化失败 原因:页面异步获取数据很慢,导致slider初始化之后,数据还未获取到,导致图片还未加载 解决方 ...

随机推荐

  1. Codeforces444A_DZY Loves Physics

    DZY Loves Physics time limit per test 1 second memory limit per test 256 megabytes input standard in ...

  2. [Sencha ExtJS &amp; Touch] 在Sencha(Extjs/Touch)应用程序中使用plugins(插件)和mixins(混入)

    原文链接:http://blog.csdn.net/lovelyelfpop/article/details/50853591 英文原文:Using Plugins and Mixins in You ...

  3. 【cl】多表查询(内、外连接)

    交叉连接(cross join):该连接产生的结果集笛卡尔积 a有7行,b有8行    a的第一行与b的每一行进行连接,就有8条a得第一行 7*8=56条 select a.real_name,s.u ...

  4. luogu3369 【模板】 普通平衡树 Splay

    题目大意 维护一个数据结构,满足以下操作: 插入x数 删除x数(若有多个相同的数,因只删除一个) 查询x数的排名(排名定义为比当前数小的数的个数+1.若有多个相同的数,因输出最小的排名) 查询排名为x ...

  5. 0x53 区间DP

    石子合并 搞笑 #include<cstdio> #include<iostream> #include<cstring> #include<cstdlib& ...

  6. SRV记录用来标识某台服务器使用了某个服务,常见于微软系统的目录管理——深入的话需要去折腾Azure Active Directory

    SRV记录 SRV记录 什么情况下会用到SRV记录? [SRV记录用来标识某台服务器使用了某个服务,常见于微软系统的目录管理] SRV记录的添加方式 A.主机记录处格式为:服务的名字.协议的类型 例如 ...

  7. hihoCoder-1830 2018亚洲区预选赛北京赛站网络赛 C.Cheat 模拟

    题面 题意:4个人围一圈坐着,每个人13张牌,然后从第一个人开始,必须按照A-K的顺序出牌,一个人出牌后,剩下的人依次可以选择是否质疑他,例如,第一个人现在必须出8(因为按照A-K顺序轮到了),可是他 ...

  8. 27. Remove Element[E]移除元素

    题目 Given an array nums and a value val, remove all instances of that value in-place and return the n ...

  9. 原生JS通过勾股定理计算苹果菜单效果

    JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...

  10. 爬虫中之Requests 模块的进阶

    requests进阶内容 session处理cookie proxies参数设置请求代理ip 基于线程池的数据爬取 引入 有些时候,我们在使用爬虫程序去爬取一些用户相关信息的数据(爬取张三“人人网”个 ...