引入css和js
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.min.js"></script>
html部分
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/icon-index-user1.png" /></div>
<div class="swiper-slide"><img src="img/icon-index-user2.png" /></div>
<div class="swiper-slide"><img src="img/icon-index-user3.png" /></div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
js部分
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:true, //循环
grabCursor: true,
paginationClickable: true,
autoplayDisableOnInteraction : false,//手指滑动后继续滑动
autoplay: {
delay: 5000,//间隔时间
stopOnLastSlide: false,
disableOnInteraction: false,//手指滑动后继续滑动
},
pagination: {
el: '.swiper-pagination',
}
})
我这个js是写在了body的onload里执行的 也可以放在body标签结束前写
分页器的样式自己可以重写,覆盖原样式就行了,剩下的就都交给swiper处理就OK了