问题:

项目中有一个需求,当点击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后再显示,不会触发自动播放的解决办法的更多相关文章

  1. bootstrap的alert提示框的关闭后再显示问题

    bootstrap中有alert组件,如果点击关闭按钮后该组件会被删除而不是被隐藏,想再显示怎么办呢? bootstrap-alert.js源码片段: function removeElement() ...

  2. vue_过滤器: 对要显示的数据进行特定格式化后再显示

    过滤器 对要显示的数据进行特定格式化后再显示 并未改变原本的数据,可是产生新的对应的数据 <!DOCTYPE html> <html lang="en"> ...

  3. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

  4. STM32使用cube生成的程序后在keil5编译后首次SWD可以下载再次下载不行的解决办法。

    使用cube配置导出工程在keil5编译后首次SWD下载可以再次下载不行的解决办法. 1原因: cube使用的是HAL库,初始化语句里面禁用了调试功能. 在stm32f1xx_hal_msp.c中 _ ...

  5. 全网最详细的Hadoop HA集群启动后,两个namenode都是active的解决办法(图文详解)

    不多说,直接上干货! 这个问题,跟 全网最详细的Hadoop HA集群启动后,两个namenode都是standby的解决办法(图文详解) 是大同小异. 欢迎大家,加入我的微信公众号:大数据躺过的坑  ...

  6. 网易MuMu模拟器不显示Menu(菜单)键的解决办法

    解决方法一: 前提:需要一个键盘 步骤: 1.直接按下键盘上的Menu键. 解决方法二: 前提:需要Root之后的文件浏览器 步骤: 1.在文件管理器中打开 /System 文件夹: 2.复制 bui ...

  7. Nested Loops join时显示no join predicate原因分析以及解决办法

    本文出处:http://www.cnblogs.com/wy123/p/6238844.html 最近遇到一个存储过程在某些特殊的情况下,效率极其低效, 至于底下到什么程度我现在都没有一个确切的数据, ...

  8. Visual Studio 2010 起始页中 不显示最近使用的项目问题,解决办法

    最近新装了vs2010,发现打开vs2010 后 起始页面中的最近使用的栏目中 并未显示最近加载的项目 解决办法如下: 运行 regedit 打开下面的键值: HKEY_CURRENT_USER/So ...

  9. struts2整合axis2后,访问不到wsdl,被struts2拦截的解决办法

    在struts2中整合axis2后,访问wsdl的时候显示404  not found There is no Action mapped for action name xxxxxxxx. 解决办法 ...

随机推荐

  1. Java学习笔记42(数据库连接池 druid连接池)

    druid连接池: 是阿里的连接池,druid的稳定性及效率都很高,目前用的比较广,所以建议开发过程中尽量用druid连接池(支持国产最重要) druid连接池也需要配置文件,配置文件必须是prope ...

  2. summernote富文本编辑器

    下载summernote官方demo,解压,把文件夹中的summernote.js,summernote.css和font整个文件夹都放到服务器对应的项目目录里 引入summernote 所需要的bo ...

  3. L2-016. 愿天下有情人都是失散多年的兄妹(深搜)*

    L2-016. 愿天下有情人都是失散多年的兄妹 参考博客 #include<iostream> #include<cstdio> #include<cstring> ...

  4. 解决Arcgis相同投影仍出现偏差的问题

    网上下载了一个土地利用分类的polygon矢量图---导入arcgis--投影不是我想要的.出现了一些偏差 立即转换投影----按照网上教程--先定义投影-再定义坐标系---结果很糟糕,inconsi ...

  5. box-shadow做出一条线两种颜色

    今天同事问我一个问题,说下图的效果是怎么实现的 我当时想都没有想说这不就是两条线嘛,他说是一条线用box-shadow做出来的,之前也没有遇到过,觉得很有意思就试了一把. 语法 box-shadow: ...

  6. python学习之路04——列表和字典

    列表和字典 python中的可变数据类型有:列表和字典 不可变类型:数字,字符串,元组 今天先讲列表和字典 一.列表 1.概念: 变量:使用变量存储数据,但是,变量存储数据每次只能存储一个数据 问题: ...

  7. IIS发布错误及解决

    HTTP 错误 403.14 - Forbidden  解决办法: 打开iis管理器,找到对应网站,并找到目录浏览,双击打开. 点击启用即可. HTTP 错误 500.19 - Internal Se ...

  8. MySQL Execution Plan--NOT IN查询

    在某系统中想使用NOT IN子查询进行数据过滤,SQL为: SELECT * FROM TB001 AS T1 DAY) AND T1.BATCH_NO NOT IN(SELECT BATCH_NO ...

  9. C#的发展历程 -- 系列介绍

    C#的发展历程第五 - C# 7开始进入快速迭代道路 C#与C++的发展历程第四 - C#6的新时代 C#与C++的发展历程第三 - C#5.0异步编程巅峰 C#与C++的发展历程第二 - C#4.0 ...

  10. shell(2)图片重命名

    1:图片重命名 原来的图片名字格式: 改成的图片名字格式: #!/bin/bash #重命名 .png和.jpg #如果原文件的图片名称是从0开始,那么count=:从1开始,那么count= cou ...