歡迎通路我的個人部落格：http://liubofeng.com/

前端插件swiper的基礎使用

很多網站都會使用輪播圖，然而自己編寫輪播圖是一個比較繁瑣的過程，在編寫過程中要編寫輪播圖切換時間，切換按鈕等等。在實際項目中要用到輪播圖大可不用自己從零編寫，隻要會使用swiper這一款插件即可實作很多輪播特效。

官網下載下傳swiper

進入網站https://www.swiper.com.cn/download/index.html 下載下傳相應版本的swiper文檔。

部落客在這裡下載下傳的是最新版本6.8.1,如下圖所示：

下好之後解壓即可得到名為swiper-master的檔案夾。

swiper使用

在https://www.swiper.com.cn/demo/index.html檢視自己想要的輪播圖效果，部落客在這裡示範一下怎麼把如下圖所示的Loop模式 / 無限循環(200)用到自己的項目中。

在剛剛解壓得到檔案夾中有一個demos檔案夾如下圖：

進入到demos檔案夾，該檔案夾裡示範的就是官網上的效果，Loop模式 / 無限循環(200)的代号是200，在demos檔案夾裡找到200開頭的html檔案，如下圖所示：

在編輯器中打開該html檔案，将該檔案的代碼複制到自己的html檔案中，這裡有個要注意的點，代碼引用的css檔案和js檔案的路徑要根據自己的路徑情況來修改。

複制的代碼中應用的css和js是這樣的：

<link rel="stylesheet" href="../package/swiper-bundle.min.css">
<script src="../package/swiper-bundle.min.js"></script>
           

複制的代碼中的css和js檔案都放在swiper-maste檔案夾中的package檔案夾中，将css和js檔案複制到自己的項目中，然後将引用路徑修改為自己存放css和js的路徑即可：

<link rel="stylesheet" href="css/swiper-bundle.min.css">
<script src="js/swiper-bundle.min.js"></script>
           

然後運作自己的html檔案就可以得到官圖一樣的效果了。

<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裡的元素改為自己要用于輪播的圖檔就可以了，部落客在這裡隻使用了三張輪播圖。

<div class="swiper-slide"><img src="img/1.jpg" ></div>
      <div class="swiper-slide"><img src="img/2.jpg" ></div>
      <div class="swiper-slide"><img src="img/3.jpg" ></div>
           

如果圖檔規格不統一，比如有的圖檔尺寸大，有的尺寸小的話就可能會出現下圖這樣的情況：圖檔遮擋其他圖檔，或被其他圖檔遮擋。

可以給圖檔添加樣式設定統一的寬高即可正常顯示：

<style>
    .swiper-slide img{
      width: 80%;
      height: 80%;
    }
</style>
           

最後的效果放在了這裡http://liubofeng.com/project/swiper-show/200-infinite-loop/

各位同學可以看看效果。

部落客在這裡隻介紹了swiper的基本使用，沒有深入介紹，想要深入了解的同學們可以看看swiper的官方api文檔