移动端 Swiper
一、什么是swiper
-
开源、免费、强大的触摸滑动插件
-
Swiper常用于移动端网站的内容触摸滑动
-
Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果
#二、如何使用
1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文件
<link rel="stylesheet" href="dist/css/swiper.min.css">
<script src="dist/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 class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
3.初始化调用Swiper
var mySwiper = new Swiper ('.swiper-container', {
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
#三、Swiper常用属性
#initialSlide 初始下标
initialSlide:1 //显示第一个slide
#direction 轮播方向
direction:horizontal水平 | vertical垂直
#loop 是否循环
loop:true | false
#effect 切换效果
effect:'slide默认,位移' | 'fade淡入' | 'cube方块' | 'coverflow 3d流' | 'flip 3d翻转'
#autoplay 自动轮播
autoplay:true 等价于{
delay:3000, //每个滑块间隔的时间
stopOnLastSlide:false,// 是否在最后就一个滑块停下来
disableOnInteraction:true 如果手动的滑动 则会停止自动轮播
}
#pagination 分页器
pagination:{
el:'', //分页器类名
type:'bullets圆点'|'fraction数字'|'progressbar进度条'//分页器样式
}
#on 注册事件
on: { //this指代Swiper实例
slideChange: function () { //当发生切换时触发
console.log(this.activeIndex); //当前下标
console.log(this.previousIndex); //上一项下标
},
slideChangeTransitionStart:function(){ //切换动画开始执行前
},
slideChangeTransitionEnd:function(){ //切换动画执行结束后
}
}
#swiper.slideTo(index,speed) 控制swiper切换到指定的slide
index 将要切换到的slide下标
speed 时间