Swiper.js的使用

　　下載swiper.min.js和swiper.min.css

　　在html頭部引入這兩個文件，

　　<link rel="stylesheet" href="css/swiper.min.css">

　　<script src="js/swiper.min.js"></script>

　　

       在HTML文件的對應位置添加相應的class名，如：　

       <div class="banner swiper-container" id="banner">

                <div class="swiper-wrapper">

                       <div class="swiper-slide slide1"></div>

                       <div class="swiper-slide slide2"></div>

                       <div class="swiper-slide slide3"></div>

                </div>

                <div class="swiper-pagination"></div>

       </div>

　　　「這裏能夠實現banner的背景圖片的切換，和輪播圖同樣的效果，不須要在html引入圖片

　　　在css中引入圖片

　　　nav .banner .swiper-wrapper .slide1{width:100%;height:495px;background: url(../img/banner.png)no-repeat;background-position: center center;}

　　　nav .banner .swiper-wrapper .slide2{width:100%;height:495px;background: url(../img/banner2.png)no-repeat;background-position: center center;}

           nav .banner .swiper-wrapper .slide3{width:100%;height:495px;background: url(../img/banner3.png)no-repeat;background-position: center center;}」

    

         JavaScript：

 

　　var mySwiper = new Swiper ('.swiper-container', {

　　　　　　direction: 'horizontal', 

　　　　　　loop: true,

　　　　　　speed:1000,

　　　　　　autoplay: {

　　　　　　　　delay: 3000,

　　　　　　},

　　　　　　scrollbar: {

　　　　　　　　el: '.swiper-scrollbar',

　　　　　　},

　　　　　　pagination: {

　　　　　　　　el: '.swiper-pagination',

　　　　　　　　clickable: true,

　　　　　　},

　　　});