swiper里面几个有用的参数
概述
这是我自己用swiper和看别人官网源码用swiper总结出来的,供以后开发时参考,相信对其他人也有用。
observeParents
有时我们会改变swiper的父级元素,比如页面的resize方法;也有时我们会动态给swiper添加一些子元素。这个时候,需要如下设置swiper,才能正常运行:
<script language="javascript">
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
observer:true,
observeParents:true,
})
</script>
paginationBulletRender回调函数
这个回调函数用于完全自定义分页器的指示点,接受指示点索引和指示点类名作为参数。常用于分页器里面要填充一些文字内容的情形。
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
});
</script>
lazyLoading懒加载
swiper有一个参数是preloadImages,它的默认值为true,默认会加载所有图片。如果想懒加载图片,就可以使用lazyLoading参数开启图片的懒加载。
这个时候需要将图片img标签的src改写成data-src,并且增加类名swiper-lazy。背景图的延迟加载则增加属性data-background。并且给div增加一个swiper-lazy-preloader类。实例如下:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img data-src="path/to/picture-1.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<img data-src="path/to/picture-2.jpg" class="swiper-lazy">
<div class="swiper-lazy-preloader"></div>
</div>
<div class="swiper-slide">
<div data-background="path/to/picture-3.jpg" class="swiper-lazy">slide3</div>
</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',{
lazyLoading : true,
})
</script>
fade效果
swiper还支持各种切换效果,比如"fade"(淡入)"cube"(方块)"coverflow"(3d流)"flip"(3d翻转)。实例如下:
<script language="javascript">
var mySwiper = new Swiper('#swiper-container1',{
effect : 'fade',
})
var mySwiper2 = new Swiper('#swiper-container2',{
effect : 'cube',
})
var mySwiper3 = new Swiper('#swiper-container3',{
effect : 'coverflow',
slidesPerView: 3,
centeredSlides: true,
})
var mySwiper4 = new Swiper('#swiper-container4',{
effect : 'flip',
})
</script>
superslide
在PC端建议使用更加人性化的superslide插件,因为它支持hover切换。
swiper里面几个有用的参数的更多相关文章
- Swiper说明&&API手册 【中文手册Swiper】
原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...
- Swiper 中文API手册(share)
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
- Swiper.js 中文API手册
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...
- Swiper说明&&API手册
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
- Swiper说明及API手册说明
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
- Swiper API
本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...
- Swiper Usage&&API
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解SwiperSwiper 是一款免费以及轻 ...
- idangerous swiper
最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...
- [转]redis-cli的一些有趣也很有用的功能
本文转至:http://www.tuicool.com/articles/Yvqm2ev http://mdba.cn/category/redis/ redis-cli我们最常用的两个参数就是-h. ...
随机推荐
- Kafka的安装及与Spring Boot的集成
安装JDK 下载jdk-8u202-ea-bin-b03-linux-x64-07_nov_2018.tar.gz 解压 配置 $ vi /etc/profile,在最后加入下面两行 export J ...
- Saliency Detection: A Spectral Residual Approach
Saliency Detection: A Spectral Residual Approach 题目:Saliency Detection: A Spectral Residual Approach ...
- 3,postman的变量写法和collection
1,环境变量和全局变量的添加和引用 pm.globals.get("variable_key");可以引用环境变量 2,collection的使用 当在tests中使用文件变量的时 ...
- Charles抓https请求详细步骤
1.电脑上安装好Charles 2.电脑上安装证书 (1)点击Help - SSL Proxying - Install Charlse Root Certificate (2)在电脑上找到证书.此时 ...
- GUI学习之三——QObject学习总结
鉴于PyQt控件的继承关系,我们先学习PyQt控件的基类——QObject. 一.所有的QT对象的基类 我们先看一下PyQt里空间的继承关系,稍微改一下代码,显示出继承关系 from PyQt5.Q ...
- SystemUI中设置横竖屏显示
SystemUI中快捷菜单有 “方向锁定” . RotationLockTile protected void handleClick() { if (mController == null) ret ...
- UVA 2290 Transmitters
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...
- Mysql数据库每天定时执行备份方法
此数据库备份方法是简单的数据库备份方法,就是从Mysql的数据文件下,将数据库文件拷贝到指定的文件夹目录下 1.创建txt文件,添加脚本 net stop mysql xcopy D:\MySql\D ...
- linux下安装srilm
1.安装相关依赖库 a.c/c++ compiler:编译器gcc 3.4.3及以上版本 b.GNU make:构建和管理工程的工具,解释Makefile里的指令,描述了整个工程所有文件的编译顺序 ...
- System.Web.Caching.Cache缓存帮助类
/// <summary> /// 缓存帮助类 /// </summary> public class CacheHelper { /// <summary> // ...