动态模板中 SWIPER 划不动问题
原文:
地址:http://hao.jser.com/archive/8030/
作者:segmentfault
问题:
动态循环生成swiper-slide类,在swiper-wrapper里生成6个以上的滑动页,可是就是划不到第二页。
解决:
在查阅Swiper的API时发现,有这样两个参数:observer
和observeParents
,前者启动动态检查器,当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。后者原理和前者一样,只是将observe应用于Swiper的父元素。两者默认值都为false
。
所以在原来的swiper初始化代码中加上这两行即可。
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
paginationClickable: true,
longSwipesRatio: 0.3,
touchRatio:1,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
})
动态模板中 SWIPER 划不动问题的更多相关文章
- 走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
- vert.x学习(六),动态模板与静态文件的结合
这篇学习在动态模板里面引入css,把动态模板与静态文件结合起来使用. 编写DynamicReference.java package com.javafm.vertx.helloworld; impo ...
- 迷你MVVM框架 avalonjs 沉思录 第3节 动态模板
模板的发明是编程史上的一大里程碑,让我们摆脱了烦锁且易出错的字符串拼接,维护性大大提高. 都在JSP,ASP时代,人们已经学会使用include等语句,将多个页面片断拼接成一个页面. 此外,为了将数据 ...
- 模板中的 TemplateBinding 问题
昨天一个朋友向我求助一个自定义水印控件绑定的问题,问题出在文本框中输入的文本,不能绑定到 相应的依赖属性上(自定义的依赖属性 PassText),他纠结了很久找不出问题所在.问题帮他解决后,这里稍 做 ...
- elasticsearch 动态模板
在elasticsearch中,如果你有一类相似的数据字段,想要统一设置其映射,就可以用到一项功能:动态模板映射(dynamic_templates). 每个模板都有一个名字用于描述这个模板的用途,一 ...
- Logstash动态模板映射收集Nginx的Json格式日志
Logstash传输给ES的数据会自动映射为5索引,5备份,字段都为text的的索引.这样基本上无法进行数据分析.所以必须将Logstash的数据按照既定的格式存储在ES中,这时候就要使用到ES模板技 ...
- Elasticsearch7.X 入门学习第八课笔记-----索引模板和动态模板
原文:Elasticsearch7.X 入门学习第八课笔记-----索引模板和动态模板 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接: ...
- 使用FreeMarker配置动态模板
FreeMarker动态模板 目录 FreeMarker动态模板 前言 准备工作 FreeMarker 代码构建 项目结构 创建 Configuration 实例 调用 模板文件 调用结果 Tips ...
- ThinkPHP+Smarty模板中截取包含中英文混合的字符串乱码的解决方案
好几天没写博客了,其实有好多需要总结的,因为最近一直在忙着做项目,但是困惑了几天的Smarty模板中截取包含中英文混合的字符串乱码的问题,终于解决了,所以记录下来,需要的朋友看一下: 出现乱码的原因: ...
随机推荐
- java学习系列(一)Java中的IO操作
Java的IO流是实现输入/输出的基础,它可以方便地实现数据的输入\输出操作,在Java中把不同的输入\输出源抽象为"流",通过流的方式允许Java程序使用相同的方式来访问不同的输 ...
- Ajax大文件切割传输
文件上传服务器的大小是一定的,所以大文件可以切割成小文件,依次 传输,然后再拼接切割文件上传,用同步方式传输,为了防止异步传输 中多个块同时传输,文件拼接错误,导致文件损坏 前端页面 <!doc ...
- PHP分页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 八、android jni 之C语言基础
*含义 1.乘法 3*5 2.定义指针变量 int * p://定义了一个名字叫p的变量,能够存放int数据类型的地址 3.指针运算符, //如果p是一个已经定义好的指针变量则*p表示以p的内容为地址 ...
- Android 图片开发内幕系列第一篇
前言:本来我是做电视应用的,但是因为公司要出手机,人员紧张,所以就抽调我去支援一下,谁叫俺是雷锋呢!我做的一个功能就是处理手机中的应用ICON,处理无非就是美化一下,重新与底板进行合成和裁剪,用到了很 ...
- ajax请求简写
<script type="text/javascript"> function changle() { $.post( "SendMail", / ...
- java与C#用protobuf通信--java如何转换protobuf-net中的bcl.Decimal对象
公司内部有些C#服务使用proto-net,引入了bcl.proto中的bcl.Decimal.bcl.DateTime等.对于java的proto生成代码需要对bcl.Decimal.bcl.Dat ...
- Allegro设置十字大光标
使用大十字光标,在摆放元器件时,容易对齐.在allegro中,可以通过设置实现大十字光标,其具体方法如下: 1.选择Setup->User Perferences,即可出现如下图所示界面: 2. ...
- VS2010恢复默认编辑环境的设置
VS2010恢复默认编辑环境的设置 VS2010在安装完成后初次打开的时候可以设置自己常用的环境为默认打开的编辑环境, 也可以在打开IDE以后通过如下步骤设置默认环境: Tools->Impor ...
- android-support-xxxx.jar NoClassDefFoundError
当你的项目出现以下红色提示的时候,要小心了,因为很可能因为这个错误而导致解释不通的异常出现. Found 2 versions of android-support-v4.jar in the dep ...