使用swiper.js写轮播

初涉swiper.js，记录一下使用过程
1.首先引入js和css

<script src="./js/swiper-3.4.2.jquery.min.js"></script>
<link href="./css/swiper-3.4.2.min.css" rel="stylesheet">

2.结合swiper，自己写样式布局

<style>.smallwai{padding: 0 5px;}</style>
<div class="swiper-container">
         <div class="swiper-wrapper">
             <div class="swiper-slide">
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue1.png"/>
                     <div>
                         <B>丰田-汉兰达</B>
                         <div class="fsize">省油|舒适|7座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue2.png"/>
                     <div>
                         <B>路虎</B>
                         <div class="fsize">省油|舒适|5座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue3.png"/>
                     <div>
                         <B>丰田-普拉多</B>
                         <div class="fsize">省油|舒适|5座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
             </div>
             <div class="swiper-slide">
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue4.png"/>
                     <div>
                         <B>丰田陆地巡洋舰</B>
                         <div class="fsize">省油|舒适|5座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue5.png"/>
                     <div>
                         <B>路虎</B>
                         <div class="fsize">省油|舒适|5座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue6.png"/>
                     <div>
                         <B>保时捷Macan</B>
                         <div class="fsize">省油|舒适|2座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
             </div>
             <div class="swiper-slide">
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue1.png"/>
                     <div>
                         <B>丰田-汉兰达</B>
                         <div class="fsize">省油|舒适|7座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue3.png"/>
                     <div>
                         <B>丰田-普拉多</B>
                         <div class="fsize">省油|舒适|5座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
                 <div class="col-xs-4 smallwai">
                     <img class="bopic" src="./img/yue5.png"/>
                     <div>
                         <B>路虎</B>
                         <div class="fsize">省油|舒适|5座</div>
                         <div class="fsize">新车|保险齐全</div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <!-- 如果需要分页器 -->
     <div class="swiper-pagination dian"></div>

3.根据需求选择所要的属性

<script type="text/javascript">
    window.onload = function() {
        var mySwiper = new Swiper ('.swiper-container', {
            // 轮播图的方向，也可以是vertical方向
            direction:'horizontal',
            //播放速度
            loop: true,
            // 自动播放时间
            autoplay:1000,
            // 播放的速度
            speed:2000,
            // 如果需要分页器，即下面的小圆点
            pagination: '.swiper-pagination',
            // 滑动之后， 定时器也不会被清除
            autoplayDisableOnInteraction : false,
        });
    }
</script>

样式效果图如下