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

時間 2020-02-12

標籤 swiper.js swiper 簡單快速實現滑動兼容移動欄目 JavaScript 简体版

原文原文鏈接

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

效果演示：

PC端html

移動端（在瀏覽器將設備切換爲手機，這裏切換爲iphone），swiper支持移動端觸控左右滑動web

代碼部分（複製粘貼可直接使用）：

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/dow...
swiper4遠程CDN加載地址：
https://www.swiper.com.cn/cdn...ajax

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...segmentfault

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...api