使用 swiper 輪播插件遇到的問題及解決方法
- 2019 年 11 月 13 日
- 筆記
swiper插件還是比較有名的，大家應該都不陌生。
我只是記錄一下我在使用過程中遇到的幾個屬性，詳細API大家可以直接去官網查看：Swiper4.x使用方法
初始化 Swiper：
var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal',//橫向切換，默認：vertical（縱向切換） loop: true,//環路 // 如果需要分頁器 pagination: { el: '.swiper-pagination', }, // 如果需要前進後退按鈕 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滾動條 scrollbar: { el: '.swiper-scrollbar', }, })
頁面載入完再初始化：
$(document).ready(function () { ... })
我在使用過程中遇到的一些問題：
默認切換按鈕在輪播圖的內部（圖1），我需要把它放在外面（圖2）。
圖1
圖2
js並沒有相應的配置項，我們可以把 .swiper-button-prev 和 .swiper-button-next 兩個按鈕標籤移到 .swiper-container 標籤的外面，然後在再嵌一層將它們包住，給它設置一個 padding ，然後需要在 CSS 中加一個 position: relative; 設置相對定位，如下圖：
程式碼如下：
HTML：
<div class="swiper-box"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="banner.jpg"/></div> <div class="swiper-slide"><img src="banner.jpg"/></div> <div class="swiper-slide"><img src="banner.jpg"/></div> </div> <!-- 如果需要分頁器 --> <!--<div class="swiper-pagination"></div>--> <!-- 如果需要導航按鈕 --> <!--<div class="swiper-button-prev"></div>--> <!--<div class="swiper-button-next"></div>--> </div> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div>
樣式也需要稍微調一下，CSS程式碼：
.swiper-box{ width: 590px; padding: 30px; position: relative; margin: 0 auto; } .swiper-container { width: 530px; } .swiper-pagination{ text-align: center; width: 590px; } .swiper-pagination-bullet{ margin: 10px; }
可以再添加一行標題：
稍微改一下樣式，把它定位到圖片下方：
.swiper-title{ text-align: center; position: absolute; bottom: 10px; width: 100%; line-height: 36px; background: rgba(0,0,0,0.2); color: #FFF; }
如下圖：
分組顯示：以3個為一行/組 在js中添加下面兩行
slidesPerView : 3,//一行顯示3個 slidesPerGroup : 3,//3個一組
設置間距：以20px為例
spaceBetween : 20,
兩行顯示：
slidesPerColumn: 2,//顯示2行
這裡需要注意一下，我寫了7個輪播圖，卻顯示3個分頁按鈕，其實這裡要注意一下 slidesPerGroup 屬性，將其改為6（一頁顯示的個數）即可正常顯示：
slidesPerGroup : 6,
一個頁面中寫多個 Swiper 組件：
HTML：先寫兩個盒子用 class 進行區分
<div class="swiper-container swiper-container1"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="banner.jpg"/></div> <div class="swiper-slide"><img src="banner.jpg"/></div> <div class="swiper-slide"><img src="banner.jpg"/></div> </div> <div class="swiper-pagination pagination1"></div> </div> <div class="swiper-container swiper-container2"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="banner.jpg"/></div> <div class="swiper-slide"><img src="banner.jpg"/></div> <div class="swiper-slide"><img src="banner.jpg"/></div> </div> <div class="swiper-pagination pagination2"></div> </div>
js 程式碼：定義兩個 Swiper 盒子和分頁按鈕。
<script> var mySwiper1 = new Swiper('.swiper-container1', { direction: 'horizontal', pagination: { el: '.pagination1', }, }), mySwiper2 = new Swiper('.swiper-container2', { direction: 'horizontal', pagination: { el: '.pagination2', }, }) </script>
注意，我這裡為了方便，只寫了一個分頁按鈕，如果有前進後退和進度條等按鈕，也要進行區分。
