1.引入swiper.min.js和swiper.min.css兩個文件，文件百度網盤下載地址鏈接：https://pan.baidu.com/s/1KwIzPfe9hFpSiMr5GqAWxw

提取碼：9lda

壓縮的css和js文件，引入方式不過多介紹

2.頁面格式如下

// 1

// 2

// 3

完成上述步驟之后頁面效果已經全部完成了，如果需要自定義樣式輪播，可以不用1,2,3部分的img標簽，自己手動寫html內容和樣式，根據自己具體要實現的效果添加。

3.接下來寫js代碼

window.οnlοad= function(){

var mySwiper = new Swiper ('.swiper-container', {

effect:'coverflow', //滑動效果

touchAngle : 30, //滑動的角度超過30度無效

// 輪播圖的方向，也可以是vertical方向

direction:'horizontal',

//環形切換關閉

loop: false,

// 切換的速度

speed:800, //滑動或者自動換頁時的速度

// 如果需要分頁器

pagination: {

el: '.swiper-pagination',

clickable:true,

type:'bullets',

},

paginationClickable:true,

// 這樣，即使我們滑動之后， 定時器也不會被清除

autoplayDisableOnInteraction : false,

on: { //滑動調用該方法

slideChangeTransitionEnd: function(){

var slide = this.activeIndex;

//測試用

// alert("當前位置："+slide);//滑動結束時，告訴我現在是第幾個slide(第幾頁)

},

},

});

mySwiper.pagination.bullets.css('background','white');

}

4.完成上述步驟后就可以實現一個簡單的頁面輪播的效果了，想要更多的效果可以參考官網的文檔，這里就不再詳細描述了。注意引用swiper的版本swiper4中文文檔

總結

以上是生活随笔為你收集整理的html5 swiper 菜鸟,前端插件swiper使用新手教程的全部內容，希望文章能夠幫你解決所遇到的問題。

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