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

NO IMAGE

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

效果演示:

PC端:

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

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

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

代碼部分(複製粘貼可直接使用):

 1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Swiper.js簡單快速實現輪播滑動(兼容PC端、移動端)</title>
5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
6 
7 <!-- 下面加載Swiper的css跟js文件。可以將文件下載到項目中加載,也可以通過cdn遠程加載,這裡使用的是cdn遠程加載 -->
8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css"><!-- 加載Swiper的css文件 -->
9 <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script><!-- 加載Swiper的js文件 -->
10 </head>
11 <body>
12     <div style="height: 200px;" class="swiper-container">
13         <div class="swiper-wrapper">
14             <!-- 下面是4個不同顏色的輪播滑塊 -->
15             <div style="background-color: red;" class="swiper-slide">slider1</div>
16             <div style="background-color: green;" class="swiper-slide">slider2</div>
17             <div style="background-color: yellow;" class="swiper-slide">slider3</div>
18             <div style="background-color: blue;" class="swiper-slide">slider4</div>
19         </div>
20         <div class="swiper-button-prev"></div><!--左箭頭-->
21         <div class="swiper-button-next"></div><!--右箭頭-->
22         <div class="swiper-pagination"></div><!--分頁器(就是4個點點)-->
23     </div>
24 </body>
25 </html>
26 <script>
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,//循環
42  })
43 </script>

使用方法:

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

<head>
<!-- 這裡使用的是cdn遠程加載Swiper4的版本 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/css/swiper.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.2/js/swiper.js"></script>
</head>

swiper4文件下載地址:

https://www.swiper.com.cn/download/index.html

swiper4遠程CDN加載地址:

https://www.swiper.com.cn/cdn/index.html

2.HTML內容

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">slider1</div>
<div class="swiper-slide">slider2</div>
<div class="swiper-slide">slider3</div>
<div class="swiper-slide">slider4</div>
</div>
</div>

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

3.初始化Swiper

<script>
var mySwiper = new Swiper('.swiper-container', {
autoplay:true,//等同於以下設置
/*autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: true,
},*/
});
</script>

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

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

結語:

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

最後

覺得文章不錯的話,給我個關注哇,點個讚唄!

如果對文章有疑問或想技術交流,可關注公眾號【GitWeb】與我一起探索學習!

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

相關文章

前端必備的實用工具,都在這裡了

JavaScript進階之道

Python進階之道

白話分析自適應跟響應式的區別