兼容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