今天給新手介紹一個輪播圖插件——swiper

首先要引用swiper.min.css和swiper.min.js。

頁面代碼

<div class="swiper-container" id="swiper-container">
?? ??? ?<div class="swiper-wrapper">
?? ??? ??? ?<div class="swiper-slide">Slide 1-1</div>
?? ??? ??? ?<div class="swiper-slide">Slide 1-2</div>
?? ??? ??? ?<div class="swiper-slide">Slide 1-3</div>
?? ??? ?</div>
?? ?</div>

初始化

var swiper = new Swiper('#swiper-container');

這是常規的，

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

初始化

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

這是帶左右箭頭，跟swiper-wrapper同一級

<div class="swiper-pagination"></div>

初始化

var swiper = new Swiper('#swiper-container3', {?
?? ??? ??? ?pagination: {
?? ??? ? ? ? ? ?el: '.swiper-pagination',
?? ??? ? ? ?}
?? ??? ?});

這是分頁器，也是跟swiper-wrapper同一級

詳細的可以參考?swiper官網

總結

以上是生活随笔為你收集整理的轮播图插件（swiper）的全部內容，希望文章能夠幫你解決所遇到的問題。

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