使用Swiper实现无线滚动效果

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

在HTML body加入以下内容：

<div class="m-detail-show"> <!-- Swiper --> <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> <!-- Add Pagination --> <div class="swiper-pagination"></div> </div> </div><!-- Swiper JS --><script src="../../js/lib/swiper.min.js"></script><!-- Initialize Swiper --><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%;}

无图片效果：