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. java editor template Eclipse中的快速Java\JavaScript代码模板使用

    java editor template Eclipse中的快速Java\JavaScript代码模板使用 学习了:http://technicalsearch.iteye.com/blog/2150 ...

  2. 【Android界面实现】SlidingMenu最新版本号使用具体解释

    转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 在非常久之前的一篇文章中,简单的介绍了一下开源项目SlidingMenu控件的使用,这一篇文章,将比較具体的 ...

  3. 王立平--Http中Get() 与 Post()的差别?

    Http协议是基于TCP协议的,而TCP协议是一种有连接.可靠的传输协议.假设丢失的话,会重传.所以这种话,就 不会有数据的丢失了. 而Http协议有三种方法.Get,Post,Head方法.可是用的 ...

  4. JavaFX本地应用自己主动更新功能的实现FXLauncher

    JavaFX本地应用自己主动更新功能的实现--FXLauncher 作者:chszs,未经博主同意不得转载.经许可的转载需注明作者和博客主页:http://blog.csdn.net/chszs 一. ...

  5. iOS项目开发实战——使用Xcode6设计自己定义控件与图形

    在iOS开发中,有很多控件都是Xcode默认提供的.使用这些控件是很方便的.可是因为某些须要.须要自己设计控件,那么应该怎么做呢?在Xcode6中提供了这种接口,同意开发人员高速开发自己定义控件,而且 ...

  6. Eclipse打开ftl文件,高亮显示

    解决方式一:下载eclipse相关的freemarker插件 解决方式二:原生解决方式,方法特点无需下载插件,和eclipse编辑html和jsp文件一模一样 步骤: 1:windows---pref ...

  7. vim相关资料

    http://www.360doc.cn/article/15064667_402846667.html http://blog.jobbole.com/86809/ http://blog.csdn ...

  8. codeforces 712A. Memory and Crow

    2019-05-18 08:48:27 加油,加油,坚持!!! 这道题我没有想出公式推导,只是按照模拟题来做,第5个样例超时 样例超时,方法错误 https://www.cnblogs.com/ECJ ...

  9. c++对象关系映射(ORM)框架

    ORM(Object Relational Mapping, 对象关系映射),用来将基于对象的数据结构映射到SQL的数据结构中,即将基于对象的数据映射到关系表中的字段,然后我们可以通过对象提供的接口来 ...

  10. js中获取浏览器和屏幕高度

    Javascript: IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...