使用Swiper实现无线滚动效果

swiper地址：http://idangero.us/swiper/api/#.V5B6wJN969s

在HTML body加入以下内容：

<div class="m-detail-show">
 
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide"><img src="../../img/game/banner.png">div>
 <div class="swiper-slide"><img src="../../img/game/banner.png">div>
<div class="swiper-slide"><img src="../../img/game/banner.png">div>
 <div class="swiper-slide"><img src="../../img/game/default_img_banner.png">div>
 <div class="swiper-slide"><img src="../../img/game/default_img_banner.png">div>
 <div class="swiper-slide"><img src="../../img/game/default_img_banner.png">div>
 <div class="swiper-slide"><img src="../../img/game/default_img_banner.png">div>
 <div class="swiper-slide"><img src="../../img/game/default_img_banner.png">div>
 <div class="swiper-slide"><img src="../../img/game/default_img_banner.png">div>
 <div class="swiper-slide"><img src="../../img/game/default_img_banner.png">div>
div>
 
 <div class="swiper-pagination">div>
 div>
 div>



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

<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable:true,
        /*无限轮播*/
        autoplayDisableOnInteraction: false,
        autoplay : 5000
    });
script>

• m-detail-show:父容器盒子(自己写的，非必须)
• swiper-container // Slider main container
• swiper-wrapper //Additional required wrapper
• swiper-slide //滑动的子元素
• swiper-pagination //下方点

css.css:

.m-detail-show{
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 200px;
    border: 0.5px solid #d3d3d3;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-wrapper{
    width: 100%;
}


.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.swiper-slide>img{
    width: 100%;
    height: 100%;
}

无图片效果：