使用swiper插件,隐藏swiper后再显示,不会触发自动播放的解决办法
问题:
项目中有一个需求,当点击P1时,两个页面进行轮播。当点击P2时,页面不轮播。
设置好以后,点击P2,再点击P1,此时页面不能自动轮播,只能手动触发。
解决:
在轮播器配置里,配置observer值为true,即可自动初始化swiper。此时不需手动触发,就可自动轮播。
代码如下:
swiperOption3: {
autoplay: 3 * 1000,
setWrapperSize: true,
autoplayDisableOnInteraction: false,
observer: true, // 启动动态检查器,当改变swiper的样式(例如隐藏/显示)
或者修改swiper的子元素时,自动初始化swiper。
默认false,不开启,可以使用update()方法更新。
observeParents: true, // 将observe应用于Swiper的父元素。当Swiper的父元素变化时,
例如window.resize,Swiper更新。
direction: 'horizontal',
pagination: '.a2-swiper-roam3',
paginationClickable: true
},
关于observer的官方解读,请点击链接
使用swiper插件,隐藏swiper后再显示,不会触发自动播放的解决办法的更多相关文章
- bootstrap的alert提示框的关闭后再显示问题
bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() ...
- vue_过滤器: 对要显示的数据进行特定格式化后再显示
过滤器 对要显示的数据进行特定格式化后再显示 并未改变原本的数据,可是产生新的对应的数据 <!DOCTYPE html> <html lang="en"> ...
- php页面加载完毕后再显示购买按钮
php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})
- STM32使用cube生成的程序后在keil5编译后首次SWD可以下载再次下载不行的解决办法。
使用cube配置导出工程在keil5编译后首次SWD下载可以再次下载不行的解决办法. 1原因: cube使用的是HAL库,初始化语句里面禁用了调试功能. 在stm32f1xx_hal_msp.c中 _ ...
- 全网最详细的Hadoop HA集群启动后,两个namenode都是active的解决办法(图文详解)
不多说,直接上干货! 这个问题,跟 全网最详细的Hadoop HA集群启动后,两个namenode都是standby的解决办法(图文详解) 是大同小异. 欢迎大家,加入我的微信公众号:大数据躺过的坑 ...
- 网易MuMu模拟器不显示Menu(菜单)键的解决办法
解决方法一: 前提:需要一个键盘 步骤: 1.直接按下键盘上的Menu键. 解决方法二: 前提:需要Root之后的文件浏览器 步骤: 1.在文件管理器中打开 /System 文件夹: 2.复制 bui ...
- Nested Loops join时显示no join predicate原因分析以及解决办法
本文出处:http://www.cnblogs.com/wy123/p/6238844.html 最近遇到一个存储过程在某些特殊的情况下,效率极其低效, 至于底下到什么程度我现在都没有一个确切的数据, ...
- Visual Studio 2010 起始页中 不显示最近使用的项目问题,解决办法
最近新装了vs2010,发现打开vs2010 后 起始页面中的最近使用的栏目中 并未显示最近加载的项目 解决办法如下: 运行 regedit 打开下面的键值: HKEY_CURRENT_USER/So ...
- struts2整合axis2后,访问不到wsdl,被struts2拦截的解决办法
在struts2中整合axis2后,访问wsdl的时候显示404 not found There is no Action mapped for action name xxxxxxxx. 解决办法 ...
随机推荐
- clearfix 用法
如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有 clear,导致不能被撑开.看下面的例子:Div布局如下:Css代码如下:.out{border:1 ...
- 使用vue+koa实现一个简单的图书小程序(1)
这个系列的博客用来记录我开发时候遇到的问题以及学习到的知识 边做边学: 前后端分离,高内聚低耦合小程序端使用了mpvue 内部使用了vuejs的语法 来做整个小程序的渲染层 后端使用的是koa2搭建一 ...
- Spring history&Design Philosophy 简单介绍~
SPRING框架的介绍和历史 Spring Framework是一个开源Java应用程序框架,最初是基于依赖注入(DI)和控制反转(IoC)的原理开发的. Spring Framework已经成长为控 ...
- python学习之路07
Python中你可能不关心的这几个关键字:break.continue.pass 1.break 作用:跳出循环[直接跳出整个循环,继续执行后面的代码] 1.特殊情况一 #当break使用在嵌套循环中 ...
- linux4.15.1编译init/mounts报错
AR init/mounts.o arm-linux-ar: illegal option -- T Usage: arm-linux-ar [emulation options] [-]{dmpqr ...
- groovy学习知识
(1)Groovy是一种基于JVM的敏捷开发语言,它结合了Python.Ruby和Smalltalk的许多强大的特性,Groovy 代码能够与 Java 代码很好地结合,也能用于扩展现有代码.它是一种 ...
- Spring IOC 相关的面试题
Spring最基础的部分就是IOC,对IOC的理解程度从某个方面代表着你对Spring 的理解程度,看了网上的一些面试题,针对Spring IOC相关的重点是下面几个: 1.Spring中Bean ...
- WebForm AnyWay
项目地址 : https://github.com/kelin-xycs/WebFormAnyWay WebForm AnyWay 用 WebForm 构建 简洁高效 的 Web 应用 WebFor ...
- fork exec source的区别
参考:http://www.cnblogs.com/bkygg/p/5023072.html 1:fork 运行的时候开一个sub_shell 执行调用的脚本,sub_shell执行的时候,pare ...
- grep init 与 grep [i]nit
看grep的知识点的时候,在XXX博客里看到一个这样的例子,一直在纠结,纠结,init与[i]nit 匹配到的东西不应该时一样的嘛,为什么一个匹配得出来,一个不行.后来在群里问了某位大哥,耐心的讲解, ...