1.引入swiper.min.js和swiper.min.css两个文件,文件百度网盘下载地址链接:https://pan.baidu.com/s/1KwIzPfe9hFpSiMr5GqAWxw
提取码:9lda
压缩的css和js文件,引入方式不过多介绍
2.页面格式如下
<div class="swiper-container " >
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="1.jpg"> // 1
</div>
<div class="swiper-slide">
<img src="2.jpg"> // 2
</div>
<div class="swiper-slide">
<img src="3.jpg"> // 3
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
完成上述步骤之后页面效果已经全部完成了,如果需要自定义样式轮播,可以不用1,2,3部分的img标签,自己手动写html内容和样式,根据自己具体要实现的效果添加。
3.接下来写js代码
window.onload= function(){
var mySwiper = new Swiper ('.swiper-container', {
effect:'coverflow', //滑动效果
touchAngle : 30, //滑动的角度超过30度无效
// 轮播图的方向,也可以是vertical方向
direction:'horizontal',
//环形切换关闭
loop: false,
// 切换的速度
speed:800, //滑动或者自动换页时的速度
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
clickable:true,
type:'bullets',
},
paginationClickable:true,
// 这样,即使我们滑动之后, 定时器也不会被清除
autoplayDisableOnInteraction : false,
on: { //滑动调用该方法
slideChangeTransitionEnd: function(){
var slide = this.activeIndex;
//测试用
// alert("当前位置:"+slide);//滑动结束时,告诉我现在是第几个slide(第几页)
},
},
});
mySwiper.pagination.bullets.css('background','white');
}
4.完成上述步骤后就可以实现一个简单的页面轮播的效果了,想要更多的效果可以参考官网的文档,这里就不再详细描述了。注意引用swiper的版本swiper4中文文档