swiper用后感

引入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了