概述

这是我自己用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里面几个有用的参数的更多相关文章

  1. Swiper说明&&API手册 【中文手册Swiper】

     原文地址:http://www.cnblogs.com/scavengers/p/3760449.html 示例: <link rel="stylesheet" href= ...

  2. Swiper 中文API手册(share)

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  3. Swiper.js 中文API手册

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html ---------------------------华丽的分割线------------ ...

  4. Swiper说明&&API手册

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  5. Swiper说明及API手册说明

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  6. Swiper API

    本文分享自 http://www.cnblogs.com/scavengers/p/3760449.html 最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎 ...

  7. Swiper Usage&&API

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,请指出,多谢!如果想获得国外较多而全的文档,还是用google. 一了解SwiperSwiper 是一款免费以及轻 ...

  8. idangerous swiper

    最近使用Swipe.js,发现中文的资料很少,试着翻译了一下.能力有限,翻译难免错漏,欢迎指出,多谢! 翻译自:http://www.idangero.us/sliders/swiper/api.ph ...

  9. [转]redis-cli的一些有趣也很有用的功能

    本文转至:http://www.tuicool.com/articles/Yvqm2ev http://mdba.cn/category/redis/ redis-cli我们最常用的两个参数就是-h. ...

随机推荐

  1. Kafka的安装及与Spring Boot的集成

    安装JDK 下载jdk-8u202-ea-bin-b03-linux-x64-07_nov_2018.tar.gz 解压 配置 $ vi /etc/profile,在最后加入下面两行 export J ...

  2. Saliency Detection: A Spectral Residual Approach

    Saliency Detection: A Spectral Residual Approach 题目:Saliency Detection: A Spectral Residual Approach ...

  3. 3,postman的变量写法和collection

    1,环境变量和全局变量的添加和引用 pm.globals.get("variable_key");可以引用环境变量 2,collection的使用 当在tests中使用文件变量的时 ...

  4. Charles抓https请求详细步骤

    1.电脑上安装好Charles 2.电脑上安装证书 (1)点击Help - SSL Proxying - Install Charlse Root Certificate (2)在电脑上找到证书.此时 ...

  5. GUI学习之三——QObject学习总结

    鉴于PyQt控件的继承关系,我们先学习PyQt控件的基类——QObject.  一.所有的QT对象的基类 我们先看一下PyQt里空间的继承关系,稍微改一下代码,显示出继承关系 from PyQt5.Q ...

  6. SystemUI中设置横竖屏显示

    SystemUI中快捷菜单有 “方向锁定” . RotationLockTile protected void handleClick() { if (mController == null) ret ...

  7. UVA 2290 Transmitters

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  8. Mysql数据库每天定时执行备份方法

    此数据库备份方法是简单的数据库备份方法,就是从Mysql的数据文件下,将数据库文件拷贝到指定的文件夹目录下 1.创建txt文件,添加脚本 net stop mysql xcopy D:\MySql\D ...

  9. linux下安装srilm

    1.安装相关依赖库 a.c/c++ compiler:编译器gcc 3.4.3及以上版本   b.GNU make:构建和管理工程的工具,解释Makefile里的指令,描述了整个工程所有文件的编译顺序 ...

  10. System.Web.Caching.Cache缓存帮助类

    /// <summary> /// 缓存帮助类 /// </summary> public class CacheHelper { /// <summary> // ...