前言
其实这篇文章是我早就拟定想要写出来的,但是因为性子懒,所以就一拖再拖了。
那么简单来讲,这篇文章中我将阐述自己对 Swiper.js 的理解及使用方法。希望能帮助一些人抛开官方复杂的文档实现快速使用这一开源、免费、强大的移动端触摸滑动插件。
什么是 Swiper.js ?
- Swiper 常用于移动端网站的内容触摸滑动
- Swiper 是纯 javascript 打造的滑动特效插件,面向手机、平板电脑等移动终端。
- Swiper 能实现触屏焦点图、触屏 Tab 切换、触屏多图切换等常用效果。
- Swiper 开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!
Swiper.js 能做什么?
Swiper 拥有灵活的 progress ,这是自定义制作 3D 切换效果的利器
Swiper 制作3D切换效果的方法多种多样。cube、 coverflow 和 flip 可以轻松的实现 3D 过渡,如果你想制作其他新颖的切换方式,推荐使用 progress 。progress 可以帮助你获取到滑块的进度索引。在 Swiper 上加些小动画,制作时下最流行的微展示
使用 Swiper 再配合一些你喜欢的小动画,你的图片立即变成活灵活现的微场景、微海报。
CSS3 、TweenMax 、animate.css 都具有轻量或易于使用的特点,或使用官方提供的 Swiper Animate 小插件。
Swiper Animate 有大量的 demo,下载后进行简单修改即可,是伸手党的最爱。
获取 Swiper.js
官方地址:http://www.swiper.com.cn/
在线演示:http://www.swiper.com.cn/demo/index.html
在线教程(4.0):http://www.swiper.com.cn/usage/swiper4/index.html
API文档(4.0):http://www.swiper.com.cn/api/index2.html
文章正在更新中