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