兼容pc端和移动端的轮播图插件 swiper.js

 swiper.js是一款纯JavaScript打造的滑动特效插件，可以用来实现检点轮播图，tab触摸滑动切换等常用效果。下载地址：https://www.swiper.com.cn/download/index.html#file1

 swiper.js提供给我们很多种不同的demo效果，我们可以根据自己的需求来选择自己需要。所有demo的HTML部分，CSS几乎是一样的,不一样的是调用的js方法，或配置的参数不同来达到不同的效果。

使用方法

首先我们引入 swiper.min.css和 swiper.min.js

HTML部分

<div class="swiper-container">
    <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>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

CSS部分 所有的demo是一样的

  .swiper-container {
      width: 100%;
      height: 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;
    }

js部分可以根据自己下载的demo不同来选取自己需要的demo下的js部分代码

例如：

 var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      spaceBetween: 30,
      slidesPerGroup: 3,
      loop: true,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

你可以把swiper-slide里面Slide 1替换成自己的图片，这样这个效果就完成的了。

其中里面的参数

slidesPerView： 显示几张图片  

spaceBetween：图片之间的间距

slidesPerGroup：定义slides的数量多少为一组，在旋转模式下有效。其实就是滑动的时候一下滑动几张图片了。

loop：图片是否循环播放

 

上面这个轮播图是不会自己播放的，要自己播放，得自己手动添加autoplay:true及自动播放

更多参数设置请参考官网 https://www.swiper.com.cn/api/autoplay/112.html 或 http://www.xiaoshu168.com/jquery/103.html