swiper插件

swiper是一款功能強大、開源、免費的的前端輪播圖插件。而且面向手機平板等移動終端（更多介紹可以去官網進行查看）。
最近做項目時用到了這個插件，官網的文檔看的我很難受！

使用方法

導入文件

首先這個插件和其他的插件一樣要引入文件，不同Swiper版本用到的文件名略有不同。我下載的版本是swiper-6.4.15版本里面有一堆奇奇怪怪的文件包含了在里面。我們在package文件夾下找到下面這四個文件放入你的項目里就可以了，

最后我們導入這兩個文件就可以使用了

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

添加html部分

1.swiper-container最外層的div是一個容器
2.swiper-wrapper是一個按照一定順序排列的所有輪播圖的集合，在默認情況下是從左到右排列
3.swiper-slide：你的每一張輪播圖。
4.swiper-pagination是分頁器導航，也就是下圖所顯示的原點

5.swiper-button-prev swiper-button-next 插件默認的按鈕左右箭頭
6.swiper-scrollbar滾動條
這段代碼是官網上的可以直接復制使用，

<div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><img src="./image/輪播/202104011128519006001.jpg" alt=""></div><div class="swiper-slide"><img src="./image/輪播/202104011133182944010.jpg" alt=""></div><div class="swiper-slide"><img src="./image/輪播/202104121130451705637.png" alt=""></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>

在寫完html代碼后我們還需要對這個輪播圖進行初始化

<script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',dynamicBullets: true,},}); </script>

這個初始化有兩個參數
第一個參數：Swiper容器的css選擇器，當然你也可以把.swiper-container換成任何你自定義的名字。
第二個參數：Swiper的個性化配置。（是以一個對象的形式傳參的）

---

在完成上面幾步后輪播圖主體就完成了。
下面我介紹幾種常用的API

常用的API

其實我覺得你可以理解為給第二個參數（這個對象）設置屬性值。屬性名默認給你了

pagination（分頁器）

pagination是一個對象這個對象也有屬性

el: '.swiper-pagination'

el: 分頁器容器的css選擇器或HTML標簽。分頁器等組件可以置于container之外，(也就是說你的分頁器可以放在輪播圖容器的外面)

type: 'bullets'

type: 分頁器的樣式

可選類型：
‘bullets’ 圓點（默認）
‘fraction’ 分式
‘progressbar’ 進度條
‘custom’ 自定義

dynamicBullets: true

dynamicBullets： 動態分頁器，當你的slide很多時，開啟后，分頁器小點的數量會部分隱藏。

hideOnClick :true

hideOnClick : 點擊輪播圖時隱藏分頁器

clickable :true

clickable : 設置后你可以通過點擊來使輪播圖片切換

renderBullet: function (index, className) {return '<span class="' + className + '">' + (index + 1) + '</span>';}

**renderBullet: ** 設置了這個屬性你就可以設置自己的分頁器樣式，該屬性是一個函數類型，參數是下標索引和類名
（類名默認是swiper-pagination-bullet你不用管他）
這個函數的返回值會添加在swiper-pagination中你也可以 在返回值中拼接img標簽完成用圖片切換輪播圖

navigation（前進后退按鈕）

var mySwiper = new Swiper('.swiper-container', {navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},}); nextEl: '.swiper-button-next'prevEl: '.swiper-button-prev'

不多說默認的左箭頭和右箭頭
記住.swiper-button-next找 nextEl 下一張
.swiper-button-prev找 prevEl 上一張
你要是搞反了，會出現點擊左箭頭跑到下一張的情況

autoplay（自動輪播）

delay: 2000//2秒切換一次

delay： 自動輪播的時間，延時多少秒切換下一張圖片

disableOnInteraction: false

**disableOnInteraction: ** 在設置false時，你對輪博圖操作不會停止循環，而true，在你對輪博圖操作時會停止自動輪播

//鼠標覆蓋停止自動切換 mySwiper.el.onmouseover = function(){mySwiper.autoplay.stop(); }//鼠標離開開始自動切換 mySwiper.el.onmouseout = function(){mySwiper.autoplay.start(); }

**mySwiper.autoplay.stop() mySwiper.autoplay.start()**一個開始輪播，一個暫停輪播，不多說，那個mySwiper應該是可以修改的，名字是你初始化的swiper名字。

methods(swiper方法)

這些方法一般用在外部的元素操控輪播圖的切換

mySwiper.slideTo(0, 1000, false);//切換到第一個slide，速度為1秒

mySwiper.slideTo 這個就是根據下標來切換指定的圖片（還挺有用的，我這個項目正好用到這個方法了）第三個值：設置為false時不會觸發transition回調函數

$('#btn1').click(function(){mySwiper.slidePrev();})$('#btn2').click(function(){mySwiper.slideNext();})

mySwiper.slidePrev() mySwiper.slideNext()
看到這個next和prev就知道這個控制切換上一張和下一張的方法

properties（swiper方法)

mySwiper.realIndex

mySwiper.realIndex 獲取當前輪播圖的索引（感覺這個用到的地方會很多）從0開始

mySwiper.isEnd

mySwiper.isEnd 判斷是不是最后一張輪播圖。

（如果這篇文章有什么問題請及時聯系我！）

總結

以上是生活随笔為你收集整理的前端插件swiper基础使用详解含部分常用API的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。