简介
- swiper是一个免费的轻量级的，主要处理移动设备 触控滑块 的js框架，主要是为iOS设计的，但是在安卓，wp和pc端也有良好的用户体验。
特点
- 1、轻量级，简洁高效；
- 2、横跨多种设备iOS、安卓、wp、pc；
- 3、多种版本支持（原生，jQuery，zepto）。
注意
- swiper现在已经发展到3.x系列，最新的版本已经不再全面支持PC端的浏览器，如果要更好地兼容性，需要使用2.x版本（IE7+）。
使用
- 1、引入文件
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
- 2、HTML结构
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
</div>
- 3、Js文件调用
var swiper = new Swiper('.swiper-container');
注意：html的结构不能随意进行修改，标签的类名也不能修改，如果要修改，那么需要单独添加类名进行控制！！！
高级使用方式
HTML:
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
** 对应的js参数 **
var mySwiper = new Swiper('.swiper-container',{
// 如果需要分页器
pagination: '.swiper-pagination',
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 如果需要滚动条
scrollbar: '.swiper-scrollbar'
});
注意：需要什么参数就添加对应的HTML和配置文件中的“开关”属性。
常用功能参数
- loop: true, // 循环开关
- autoplay: 3000, // 自动播放间隔时间（单位：毫秒）默认不自动播放
- direction: 'vertical', // 切换放向 水平（horizontal）或垂直（vertical）
- speed: 300, // 切换速度（单位：毫秒）
- keyboardControl: true, // 键盘控制开关
- paginationType: 'bullets', // 分页器外观 bullets、fraction、progress
- effect: 'fade', // 切换效果 fade、cube、coverflow、flip
- ......
官网
参数文档
【swiper animate】△△△
- 简介：swiper animate是swiper中文网提供的用于在swiper内快速制作CSS3动画效果的小插件，适用于Swiper2.x和Swiper3.x。
- 1、引入文件(比之前多了animate.css 和swiper.animate.js)
<link rel="stylesheet" href=“css/swiper.min.css">
<link rel="stylesheet" href=“css/animate.min.css">
<script src=“js/swiper.min.js"></script>
<script src=“js/swiper.animate.min.js"></script>
- 2、HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">Slider 1</p>
</div>
</div>
</div>
注意：在需要运动的元素上面增加类名 ani, 然后添加swiper animate 参数。
标签属性:
Swiper-animate-effect 动画效果
swiper-animate-duration 动画持续时间（一定要带单位）
swiper-animate-delay 动画延迟时间（一定要带单位）
- 3、js调用：
var mySwiper = new Swiper ('.swiper-container', {
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
