Swiper 滑動切換圖片（可用於PC端，移動端）

做爲一名後端的普通程序猿， 你讓我搞這種前端不是跟我玩命嗎，因此用插件來搞，省事又簡單，並且Swiper使用又簡單是吧；

頭皮發麻，不喜歡說廢話，我更喜歡直接看到效果；

 

按Swiper官方文檔來講， 它須要配合JQuery來使用，因此也須要引入JQ；

1， 先去官網下載一波它的 CSS, JS 文件先，https://2.swiper.com.cn/download/index.html#file1

　  下載完直接引入便可上手用了， 路徑本身改。

<link rel="stylesheet" href="css/swiper.min.css">

<script src="js/swiper.min.js"></script>

 

2， 廢話很少說， 直接上測試例子；

　　HTML（swiper的寫法）：

　　container： 裝全部滑動slide的容器

  <!-- Swiper -->
  <div class="swiper-container"> 
    <div class="swiper-wrapper">
    <div class="swiper-slide blue-slide">內容1</div>
    <div class="swiper-slide red-slide">內容2</div>
    <div class="swiper-slide orange-slide">內容3</div>
    <div class="swiper-slide blue-slide">內容4</div>
    <div class="swiper-slide orange-slide">內容5</div>
  </div>

     

　　CSS（這個按本身喜歡來調， 例子固然是越簡單越好）:

  <!-- Demo styles -->
  <style> * { margin: 0; padding: 0;
      } .blue-slide { background: #4390EE;
      } .red-slide { background: #CA4040;
      } .orange-slide { background: #FF8604;
      } .swiper-slide { line-height: 300px; color: #fff; font-size: 36px; text-align: center;
      }
  </style>

　　

　　JS：

　　若是隻是簡單作輪播圖，autoplay 和 loop 這兩個參數便可；

　　裏面的註釋我已經寫好了， 更多的參數或者功能能夠去官網找下便可；

  <!-- Initialize Swiper -->
  <script>
  var mySwiper = new Swiper('.swiper-container',{ loop : true, // 造成環路，不斷循環， 跟autoplay可組成輪播圖
 autoplay: { delay: 1000,//1秒切換一次
 }, initialSlide: 2, // 一開始就放到全部中間的位置
    slidesPerView: 3, // slider容器可以同時顯示的slides數量
    centeredSlides: true, // 默認狀態下slide居左，可是居左有問題，取到的slide下標有誤，通常設爲true:居中
    slideToClickedSlide: true, // 點擊slide會過渡到這個slide
    effect : 'coverflow', // 切換效果, coverflow:3D流 (可選)
    coverflowEffect: { // 切換效果的參數
      rotate: 0, stretch: 5, depth: 60, modifier: 2, slideShadows : true }, on:{ click:function(){ alert(this.clickedIndex); //當前點擊的是第幾張
 }, transitionEnd: function(event){ img_index = this.activeIndex; //滑動到第幾張
 }, } }); </script>

 

　效果以下：