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. ...
随机推荐
- Python内置的服务器的使用
cd 到某一文件 Python内置的服务器: E:\myObject\office\netObject\new-gcms> python -m SimpleHTTPServer 8888 如果是 ...
- excel上传下载
protected void Button1_Click(object sender, EventArgs e) { if (ViewState["unitname"] != nu ...
- Skipping acquire of configured file ···doesn't support architecture 'i386' acquire of configured file
系统更新的时候报错: Skipping acquire of configured file 'main/binary-i386/Packages' as repository 'http://rep ...
- Debian图形界面与字符界面之间的切换
图形界面切换字符界面 原文出自:https://www.cnblogs.com/qingkai/p/5443572.html 因为不能评论所以摘录过来 第一步: vi /etc/default/gru ...
- HDU1060
#include <bits/stdc++.h> using namespace std; int main() { int n; long long x; double t,ans; c ...
- Django ORM 常用字段和参数
Django ORM 常用字段和参数 一:常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. I ...
- UI交互设计关键词:情感化设计与心理
情感化设计,一定有一个关键词.情感,是指人对周围事物和自身以及对自己行为的态度,它是人对客观事物的一种特殊的反映形式,是主体对外界刺激给予肯定或否定的心理反应,也是对客观事物是否符合自己需要的态度或体 ...
- github删除
https://blog.csdn.net/weixin_42152081/article/details/80635777
- Finance财务软件帮助
我们在凭证录入的时候可以使用这些快捷键增加效率: 单元格 快捷键 功能 摘要 F7 弹出摘要选择框 科目 F7 弹出科目选择框 科目 F8 弹出扩展字段编辑界面 金额 Esc/小键盘- 清空 金额 = ...
- 每天五分钟,玩转Docker。-Day2
Day2 镜像仓库(Docker registry) Docker registry是存储容器镜像的仓库,用户可以通过Docker client 与Docker register 进行通信,以此来完成 ...