swiper是一款免費以及輕量級輪播滑動的js框架，適用于PC端跟移動端，官方地址：(https://www.swiper.com.cn/)

效果演示：

PC端

移動端(在瀏覽器將設備切換為手機，這里切換為iphone)，swiper支持移動端觸控左右滑動

代碼部分(復制粘貼可直接使用)：

1 html>

2

3

4

Swiper.js簡單快速實現(xiàn)輪播滑動(兼容PC端、移動端)

5

6

7

8

9

10

11

12

13

14

15

slider1

16

slider2

17

slider3

18

slider4

19

20

21

22

23

24

25

26

27 var?mySwiper?=?new?Swiper('.swiper-container',?{//初始化Swiper

28 ????autoplay:?{//自動切換

29 ???????delay:?3000,

30 ???????stopOnLastSlide:?false,

31? ??????disableOnInteraction:?false,

32? ????},

33? ???navigation:?{//前進后退

34? ??????nextEl:?'.swiper-button-next',

35? ??????prevEl:?'.swiper-button-prev',

36? ????},

37? ???pagination:?{//分頁器

38? ??????el:?'.swiper-pagination',

39? ??????clickable?:true,

40?? ??},

41?? ??loop?:?true,//循環(huán)

42 })

43

使用方法：

1.首先需要在head頭部加載插件，需要用到的文件有swiper.css和swiper.js文件。可下載swiper文件或使用CDN遠程加載

2.HTML內(nèi)容

slider1slider2slider3slider4

上面的HTML內(nèi)容是固定模板，如果需要添加左右箭頭或者分頁器等其他組件可以參考swiper4的官方文檔：https://www.swiper.com.cn/api...

3.初始化Swiper

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

autoplay:true,//等同于以下設置

/*autoplay:?{

delay:?3000,

stopOnLastSlide:?false,

disableOnInteraction:?true,

},*/

});

在js中如果需要添加其他配置選項可以參考swiper4的官方文檔：

https://www.swiper.com.cn/api...

結(jié)語：

在實際的web開發(fā)中，總是需要兼容PC跟移動端，如果使用原生js自己寫的話，不僅耗時，可能兼容性、穩(wěn)定性也不好，特別是移動端的touch觸控事件。使用swiper便不用考慮到兼容這些事，只要熟悉它的API，便可快速實現(xiàn)手機，電腦網(wǎng)頁大部分滑動，焦點圖、tab、觸摸導航等功能

最后

覺得文章不錯的，給我點個贊哇，關注一下唄！

技術交流可關注微信公眾號【GitWeb】，加我好友一起探討

關于找一找教程網(wǎng)

本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。

本站提供了軟件編程、網(wǎng)站開發(fā)技術、服務器運維、人工智能等等IT技術文章，希望廣大程序員努力學習，讓我們用科技改變世界。

[swiper.js簡單快速實現(xiàn)輪播滑動(兼容PC端、移動端)]http://www.zyiz.net/tech/detail-105473.html

總結(jié)

以上是生活随笔為你收集整理的pc端html轮播带滑块,swiper.js简单快速实现轮播滑动（兼容PC端、移动端）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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