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

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

頁(yè)面代碼

<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');

這是常規(guī)的，

<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同一級(jí)

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

初始化

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

這是分頁(yè)器，也是跟swiper-wrapper同一級(jí)

詳細(xì)的可以參考?swiper官網(wǎng)

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。