swiper移动端滑动插件

引入css:

<link rel="stylesheet" type="text/css" href="https://download.shengli.com/ui/control/swiper/css/swiper.min.css">

引入js:

<script type="text/javascript" src="https://download.shengli.com/ui/control/swiper/js/swiper.min.js"></script>

1.普通swiper轮播（带左右按钮以及下方提示索引）

html代码：

<div class="swiper-box swiper-box1">

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

          <div class="swiper-wrapper">

                <div class="swiper-slide">Slide 1</div>

                <div class="swiper-slide">Slide 2</div>

                <div class="swiper-slide">Slide 3</div>

                <div class="swiper-slide">Slide 4</div>

                <div class="swiper-slide">Slide 5</div>

                <div class="swiper-slide">Slide 6</div>

                <div class="swiper-slide">Slide 7</div>

                <div class="swiper-slide">Slide 8</div>

                <div class="swiper-slide">Slide 9</div>

                <div class="swiper-slide">Slide 10</div>

          </div>

          <!-- Add Pagination -->

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

    </div>

    <!-- Add Arrows -->

    <div class="swiper-button-next"></div>

    <div class="swiper-button-prev"></div>

</div>

css代码：

.swiper-box{

      width:600px;

      height: 300px;

      margin:20px 0;

      position: relative;

}

.swiper-container {

      width: 500px;

      height: 300px;

      margin:0 auto;

      visibility: hidden;

}

.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;

}

js代码：

//游戏截图

var _swiperContainer1 = document.getElementById('swiper-container1'),
swiper1 = new Swiper('#swiper-container1', {
    pagination : '.swiper-box1 .swiper-pagination',
    paginationClickable:true,
    prevButton:'.swiper-box1 .swiper-button-prev',
    nextButton:'.swiper-box1 .swiper-button-next',
    spaceBetween: 0,
    loop:true,
    autoplay:3000,
    autoplayDisableOnInteraction:false,//用户切换瘦是否停止 autoplay
    speed:600,
    disableOnInteraction:false,
    onInit:function(){
       _swiperContainer1.style.visibility = 'visible'
    }
});

2.swiper 3d轮播（带左右按钮以及下方提示索引）

引入css:

.swiper-box2{

      width:600px;

      height: 650px;

}


#swiper-container2{

      width:536;

      height: 600px;

      top:2.6rem;

}
#swiper-container2 .swiper-slide{

      width:320px;

      height: 569px;

}

引入html:

<div class="swiper-box swiper-box2">
    <div class="swiper-container" id="swiper-container2">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://download.shengli.com/ui/control/swiper/images/j1.png">
            </div>
            <div class="swiper-slide">
                <img src="https://download.shengli.com/ui/control/swiper/images/j2.png">
            </div>
            <div class="swiper-slide">
                <img src="https://download.shengli.com/ui/control/swiper/images/j3.png">
            </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination2"></div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-prev swiper-button-prev2"></div>
    <div class="swiper-button-next swiper-button-next2"></div>
</div>

引入js:

//游戏3d轮播截图

var _swiperContainer2 = document.getElementById('swiper-container2'),
swiper2 = new Swiper('#swiper-container2', {
    loop:1,
    autoplay:3000,
    autoplayDisableOnInteraction:false,//用户切换瘦是否停止 autoplay
    pagination : '.swiper-box2 .swiper-pagination',
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
    loopedSlides:3,//此值可设置为5，避免因为滑倒第一张图片而看不到上一张图片
    initialSlide:1,
    prevButton:'.swiper-box2 .swiper-button-prev',
    nextButton:'.swiper-box2 .swiper-button-next',
    spaceBetween:0,
    coverflow: {
        rotate: 0,
        stretch: 0,
        depth: 160,
        modifier: 1,
        slideShadows : false
    },
    onInit:function(){
       _swiperContainer2.style.visibility = 'visible'
    }
});

详情参考：swiper官网实例