1.先去官网(https://www.swiper.com.cn)下载最新版到自己到项目里
2.在页面引入js和css,因为我到项目里用到里animate.css所以一起引入了。
<script src="js/swiper.js" type="text/javascript"></script>
<link href="css/swiper.css" rel="stylesheet" type="text/css" />
<link href="css/animate.min.css" rel="stylesheet" type="text/css" />
3.html结构
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-1">
</div>
<div class="swiper-slide swiper-2">
</div>
</div>
</div>
注意这个结构是不能瞎写的,想写任何东西请在swiper-slide里面写。
4.js调用
var swiperV = new Swiper('.swiper-container', {
direction: 'vertical',//竖着切换
mousewheel: true,//鼠标控制
//设置宽度为全屏
width: window.innerWidth,
height : window.innerHeight,
spaceBetween: 50,//页面间隙
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
},
on: {
init:function(){
//初始化
},
slideChangeTransitionEnd: function(){//切换完执行的方法
var num = this.activeIndex;//当前是第几个页面
...... //这里是自己逻辑的代码
},
},
});
其他的看文档即可。