Swiper 經常使用功能及配置清單

時間 2019-11-13

標籤 swiper 經常使用功能配置清單简体版

原文原文鏈接

內容來源於Swiper中文在線（http://www.swiper.com.cn/），因爲Swiper功能強大，這裏只將經常使用的功能列出來，方便開發。

這裏統一使用Swiper最新版 4.0作爲演示！

Swiper 有向個必須要注意的事項：

a) 默認是不自動播放的，須要手動開啓： css

1 autoplay: {
2              delay: 2500,    // 自動播放間隔，單位ms
3              disableOnInteraction: false, // 值爲false表示用戶操做swiper以後，不會中止播放，值true中止
4            },

b) 默認點擊分頁器按鈕是沒法自動分頁的，須要手動開啓：html

1 pagination :{
2     el: '.swiper-pagination',
3     clickable :true,  // 開啓分頁按鈕點擊分頁
4   }

c) 單獨設置每一個slide的停留時間，須要在slide增長屬性，示例：ajax

1 <div class="swiper-slide" data-swiper-autoplay="5000">增長了data-swiper-autoplay屬性</div>

d) 實現循環翻屏模式，須要開啓loopchrome

1 loop : true

e) 實現自定義分頁器樣式，須要經過CSS控制，實例見演示十二api

f) 默認swiper在PC端能夠經過鼠標模板滑動效果，若是想關閉須要配置 simulateTouch 屬性：app

1  simulateTouch : false //禁止鼠標模擬

一、引用CDN外部文件：

1 <!-- CSS樣式文件 -->
2 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">

<!-- JS文件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>

二、HTML代碼結構：

 1 <!-- 代碼結構中，粉色的部份是自定義的，其它部份不能更改且是必須的 -->
 2 <!-- 樣式： sampleCss 與 id: sample 爲建立實例調用 -->
 3 <div class="swiper-container sampleCss" id="sample">
 4         <div class="swiper-wrapper">
 5             <div class="swiper-slide">Slide 1</div>
 6             <div class="swiper-slide">Slide 2</div>
 7             <div class="swiper-slide">Slide 3</div>
 8         </div>
 9         <!-- 若是須要分頁器，則加入下面代碼 -->
10         <div class="swiper-pagination"></div>
11     
12         <!-- 若是須要導航按鈕，則加入下面代碼 -->
13         <div class="swiper-button-prev"></div>
14         <div class="swiper-button-next"></div>
15     
16         <!-- 若是須要滾動條，則加入下面代碼 -->
17         <div class="swiper-scrollbar"></div>
18 </div>

三、建立Swiper實例：

語法：ide

1 new Swiper(swiperContainer, parameters)

參數：oop

1 swiperContainer : Swiper容器的css選擇器，HTMLElement or string，必選。例如「.swiper-container」。
2 parameters : Swiper的個性化配置，object類型，可選。

演示一：指定索引值的Slide爲初始化顯示屏（initialSlide : [number]）：

好比我想讓：<div class="swiper-slide">Slide 2</div> 這一屏優先顯示，代碼以下：測試

資料： http://www.swiper.com.cn/api/parameters/42.htmlui

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24 </style>
25 </head>
26 
27 <body>
28     <div class="swiper-container" id="sample">
29         <div class="swiper-wrapper">
30             <div class="swiper-slide">Slide 1</div>
31             <div class="swiper-slide">Slide 2</div>
32             <div class="swiper-slide">Slide 3</div>
33             <div class="swiper-slide">Slide 4</div>
34             <div class="swiper-slide">Slide 5</div>
35             <div class="swiper-slide">Slide 6</div>
36         </div>
37     </div>
38     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
39     <script>
40         /**
41         沒有定義左右翻頁按鈕，同時也沒有定義自動播放，因此只看到 Slide 2。
42         測試時能夠用鼠標左右滑動，查看效果
43         **/
44         var mySwiper = new Swiper('#sample',{
45             initialSlide : 1
46         });
47     </script>
48 </body>
49 </html>

演示二：設置水平滑動或者垂直滑動（direction : [horizontal | vertical]）：

資料：http://www.swiper.com.cn/api/parameters/21.html

水平滑動：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24 </style>
25 </head>
26 
27 <body>
28     <div class="swiper-container" id="sample">
29         <div class="swiper-wrapper">
30             <div class="swiper-slide">Slide 1</div>
31             <div class="swiper-slide">Slide 2</div>
32             <div class="swiper-slide">Slide 3</div>
33             <div class="swiper-slide">Slide 4</div>
34             <div class="swiper-slide">Slide 5</div>
35             <div class="swiper-slide">Slide 6</div>
36         </div>
37     </div>
38     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
39     <script>
40        alert('用鼠標能夠在顯示區域水平滑動');
41         var mySwiper = new Swiper('#sample',{
42             direction : 'horizontal'
43         });
44     </script>
45 </body>
46 </html>

垂直滑動：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24 </style>
25 </head>
26 
27 <body>
28     <div class="swiper-container" id="sample">
29         <div class="swiper-wrapper">
30             <div class="swiper-slide">Slide 1</div>
31             <div class="swiper-slide">Slide 2</div>
32             <div class="swiper-slide">Slide 3</div>
33             <div class="swiper-slide">Slide 4</div>
34             <div class="swiper-slide">Slide 5</div>
35             <div class="swiper-slide">Slide 6</div>
36         </div>
37     </div>
38     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
39     <script>
40        alert('用鼠標能夠在顯示區域垂直滑動');
41         var mySwiper = new Swiper('#sample',{
42             direction : 'vertical'
43         });
44     </script>
45 </body>
46 </html>

演示三：自動播放（autoplay : [true | false]）：

資料：http://www.swiper.com.cn/api/autoplay/16.html

默認Swiper是不自動滑動，須要設置autoplay參數。

autopaly 設置有二種方式：

1) 簡要模式：這種模式下，每隔三秒滑動一次，但用戶操做了swiper以後就中止滑動！

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31 </style>
32 </head>
33 
34 <body>
35     <div class="swiper-container" id="sample">
36         <div class="swiper-wrapper">
37             <div class="swiper-slide">Slide 1</div>
38             <div class="swiper-slide">Slide 2</div>
39             <div class="swiper-slide">Slide 3</div>
40             <div class="swiper-slide">Slide 4</div>
41             <div class="swiper-slide">Slide 5</div>
42             <div class="swiper-slide">Slide 6</div>
43         </div>
44     </div>
45     <div class="tip">每隔三秒自動滑動，但用戶操做了swiper以後會中止滑動<br/>用鼠標滑動一下就會中止自動滑動！</div>
46     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
47     <script>
48         var mySwiper = new Swiper('#sample',{
49             autoplay : true
50         });
51     </script>
52 </body>
53 </html>

2) 個性配置模式：

1 autoplay: {
2     delay                : 1000,       // [number]默認值爲3000，自動切換停留時間間隔，單位ms，你還能夠在某個slide上設置單獨的停留時間，例<div class="swiper-slide" data-swiper-autoplay="2000">
3     stopOnLastSlide      : true,       //[true | false]默認值爲false,若是設置爲true，當切換到最後一個slide時中止自動切換。（loop模式下無效）。
4     disableOnInteraction : false       //[true | false] 默認值爲true，表示用戶操做swiper以後禁止自動播放
5     reverseDirection     : true        // [true | false]默認值爲false,值爲true時開啓反向自動輪播
6     waitForTransition    : true        // [true | false] 默認值爲true, 若是值爲false則滑動還沒結束就開始新的切換(不停頓的播放效果) 
7   }

個性配置：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31 </style>
32 </head>
33 
34 <body>
35     <div class="swiper-container" id="sample">
36         <div class="swiper-wrapper">
37             <div class="swiper-slide">Slide 1</div>
38             <div class="swiper-slide" data-swiper-autoplay="5000">Slide 2</div>
39             <div class="swiper-slide">Slide 3</div>
40             <div class="swiper-slide">Slide 4</div>
41             <div class="swiper-slide">Slide 5</div>
42             <div class="swiper-slide">Slide 6</div>
43         </div>
44     </div>
45     <div class="tip">一、第二個slide停留5秒，其它的停留1秒<br/>二、用戶操做後不停止自動播放<br/>三、播放到最後時反轉播放</div>
46     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
47     <script>
48         var mySwiper = new Swiper('#sample',{
49             autoplay : {
50                 delay                : 1000,
51                 disableOnInteraction : false, // 用戶操做swiper後不停止自動播放
52                 reverseDirection     : true  // 當播放到最後一個時反轉播放
53             }
54         });
55     </script>
56 </body>
57 </html>

演示四：設置滑動速度，即開始滑動到結束的時間，單位ms（speed : [number]）：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31 </style>
32 </head>
33 
34 <body>
35     <div class="swiper-container" id="sample">
36         <div class="swiper-wrapper">
37             <div class="swiper-slide">Slide 1</div>
38             <div class="swiper-slide">Slide 2</div>
39             <div class="swiper-slide">Slide 3</div>
40             <div class="swiper-slide">Slide 4</div>
41             <div class="swiper-slide">Slide 5</div>
42             <div class="swiper-slide">Slide 6</div>
43         </div>
44     </div>
45     <div class="tip">一、每屏從開始滑動到結束滑動，用5秒來完成<br/>二、自動輪播，每屏停留2秒</div>
46     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
47     <script>
48         var mySwiper = new Swiper('#sample',{
49             speed    : 5000, // 滑動過程耗時5秒
50             autoplay : {
51                 delay                : 1000,
52                 disableOnInteraction : false, // 用戶操做swiper後不停止自動播放
53                 reverseDirection     : true  // 當播放到最後一個時反轉播放
54             }
55         });
56     </script>
57 </body>
58 </html>

演示五：設置鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀，（grabCursor : [true | false]）：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31 </style>
32 </head>
33 
34 <body>
35     <div class="swiper-container" id="sample">
36         <div class="swiper-wrapper">
37             <div class="swiper-slide">Slide 1</div>
38             <div class="swiper-slide">Slide 2</div>
39             <div class="swiper-slide">Slide 3</div>
40             <div class="swiper-slide">Slide 4</div>
41             <div class="swiper-slide">Slide 5</div>
42             <div class="swiper-slide">Slide 6</div>
43         </div>
44     </div>
45     <div class="tip">鼠標移上去看下樣式，拖動時看下樣式</div>
46     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
47     <script>
48         var mySwiper = new Swiper('#sample',{
49             grabCursor : true
50         });
51     </script>
52 </body>
53 </html>

演示六：展現區域的高度隨slide的高度而變化（autoHeight: [true | false]）：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         /*不能給容器限定高度，不然無效*/
12         /*height:300px;*/
13     }
14     .swiper-wrapper .swiper-slide{
15         color:#fff;
16         text-align:center;
17         line-height:300px;
18     }
19     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
20     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
21     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
22     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
23     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
24     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
25     .tip{
26         width:500px;
27         clear:both;
28         margin:auto;
29         color:#00F;
30         padding-top:10px;
31     }
32 </style>
33 </head>
34 
35 <body>
36     <div class="swiper-container" id="sample">
37         <div class="swiper-wrapper">
38             <div class="swiper-slide">Slide 1</div>
39             <div class="swiper-slide" style="height:500px;line-height:500px;">Slide 2</div>
40             <div class="swiper-slide">Slide 3</div>
41             <div class="swiper-slide">Slide 4</div>
42             <div class="swiper-slide">Slide 5</div>
43             <div class="swiper-slide">Slide 6</div>
44         </div>
45     </div>
46     <div class="tip">這裏我使slide 2的高度爲500像素</div>
47     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
48     <script>
49     
50         var mySwiper = new Swiper('#sample',{
51             autoplay   : true,
52             autoHeight : true
53         });
54     </script>
55 </body>
56 </html>

演示七：swiper嵌套寫法（nested: [true | false]）：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31 </style>
32 </head>
33 
34 <body>
35     <div class="swiper-container" id="sample">
36         <div class="swiper-wrapper">
37             <div class="swiper-slide">Slide 1</div>
38             <div class="swiper-slide">
39             
40                 <!-- 這裏是嵌套的swiper -->
41                 <div class="swiper-container" id="childSample">
42                     <div class="swiper-wrapper">
43                         <div class="swiper-slide" style="background:#000">嵌套1/6</div>
44                         <div class="swiper-slide" style="background:#C9C">嵌套2/6</div>
45                         <div class="swiper-slide" style="background:#699">嵌套3/6</div>
46                         <div class="swiper-slide" style="background:#990">嵌套4/6</div>
47                         <div class="swiper-slide" style="background:#096">嵌套5/6</div>
48                         <div class="swiper-slide" style="background:#F63">嵌套6/6</div>
49                     </div>
50                 </div>
51                 
52             </div>
53             <div class="swiper-slide">Slide 3</div>
54             <div class="swiper-slide">Slide 4</div>
55             <div class="swiper-slide">Slide 5</div>
56             <div class="swiper-slide">Slide 6</div>
57         </div>
58     </div>
59     <div class="tip">被嵌套的swiper的nested設置爲true。</div>
60     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
61     <script>
62         var mySwiper = new Swiper('#sample',{
63             autoplay   : true
64         });
65         
66         // 被嵌套的swiper，要加屬性 nested
67         var childSample = new Swiper('#childSample',{
68             nested   : true
69         });
70     </script>
71 </body>
72 </html>

演示八：【前進、後退按鈕】顯示先後翻屏按鈕

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31 </style>
32 </head>
33 
34 <body>
35     <div class="swiper-container" id="sample">
36         <div class="swiper-wrapper">
37             <div class="swiper-slide">Slide 1</div>
38             <div class="swiper-slide">Slide 2</div>
39             <div class="swiper-slide">Slide 3</div>
40             <div class="swiper-slide">Slide 4</div>
41             <div class="swiper-slide">Slide 5</div>
42             <div class="swiper-slide">Slide 6</div>
43         </div>
44         <div class="swiper-button-prev" id="prev"></div>
45         <div class="swiper-button-next" id="next"></div>
46     </div>
47     <div class="tip">出現了左右翻屏按鈕</div>
48     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
49     <script>
50     
51         var mySwiper = new Swiper('#sample',{
52             autoplay   : true,
53             navigation : {
54                 nextEl : '#next',
55                 prevEl:  '#prev'
56             }
57         });
58     </script>
59 </body>
60 </html>

演示九：【前進、後退按鈕】點擊slide時顯示或隱藏先後按鈕（hideOnClick: [true | false]）：

代碼以下，不過測試失效，具體見網直址：http://www.swiper.com.cn/api/navigation/356.html

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31 </style>
32 </head>
33 
34 <body>
35     <div class="swiper-container" id="sample">
36         <div class="swiper-wrapper">
37             <div class="swiper-slide">Slide 1</div>
38             <div class="swiper-slide">Slide 2</div>
39             <div class="swiper-slide">Slide 3</div>
40             <div class="swiper-slide">Slide 4</div>
41             <div class="swiper-slide">Slide 5</div>
42             <div class="swiper-slide">Slide 6</div>
43         </div>
44         <div class="swiper-button-prev" id="prev"></div>
45         <div class="swiper-button-next" id="next"></div>
46     </div>
47     <div class="tip">點擊slide顯示或隱藏左右按鈕</div>
48     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
49     <script>
50         var mySwiper = new Swiper('#sample',{
51             autoplay   : true,
52             navigation : {
53                 nextEl : '#next',
54                 prevEl:  '#prev',
55                 hideOnClick : true
56             }
57         });
58     </script>
59 </body>
60 </html>

演示十：【前進、後退按鈕】設置先後按鈕不可用時的樣式（disabledClass: [string]）：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31     .hide{display:none;}
32 </style>
33 </head>
34 
35 <body>
36     <div class="swiper-container" id="sample">
37         <div class="swiper-wrapper">
38             <div class="swiper-slide">Slide 1</div>
39             <div class="swiper-slide">Slide 2</div>
40             <div class="swiper-slide">Slide 3</div>
41             <div class="swiper-slide">Slide 4</div>
42             <div class="swiper-slide">Slide 5</div>
43             <div class="swiper-slide">Slide 6</div>
44         </div>
45         <div class="swiper-button-prev" id="prev"></div>
46         <div class="swiper-button-next" id="next"></div>
47     </div>
48     <div class="tip">當按鈕不可用時，隱藏它</div>
49     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
50     <script>
51         var mySwiper = new Swiper('#sample',{
52             autoplay   : true,
53             navigation : {
54                 nextEl : '#next',
55                 prevEl:  '#prev',
56                 disabledClass : 'hide'  // 這個參數用於設置按鈕不可用時的類名
57             }
58         });
59     </script>
60 </body>
61 </html>

演示十一：【前進、後退按鈕】使用CSS樣式，自定義按鈕風格：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31     /* 這裏定義按鈕樣式 */
32     #prev{
33         width:20px;
34         background:#ccc;
35         height:150px;
36         margin-top:-75px;
37     }
38     #next{
39         width:20px;
40         background:#900;
41         height:150px;
42         margin-top:-75px;
43     }
44 </style>
45 </head>
46 
47 <body>
48     <div class="swiper-container" id="sample">
49         <div class="swiper-wrapper">
50             <div class="swiper-slide">Slide 1</div>
51             <div class="swiper-slide">Slide 2</div>
52             <div class="swiper-slide">Slide 3</div>
53             <div class="swiper-slide">Slide 4</div>
54             <div class="swiper-slide">Slide 5</div>
55             <div class="swiper-slide">Slide 6</div>
56         </div>
57         <div class="swiper-button-prev" id="prev"></div>
58         <div class="swiper-button-next" id="next"></div>
59     </div>
60     <div class="tip">使用CSS樣式定義前進、後退按鈕樣式</div>
61     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
62     <script>
63         var mySwiper = new Swiper('#sample',{
64             autoplay   : true,
65             navigation : {
66                 nextEl : '#next',
67                 prevEl:  '#prev'
68             }
69         });
70     </script>
71 </body>
72 </html>

演示十二：【分頁導航】加載分頁導航

要顯示分頁按鈕，必須在HTML代碼內包含：

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

分頁導航經常使用設置以下：

 1 <script>
 2 pagination: {
 3                 el                  : '.swiper-pagination',  // [string]分頁器容器
 4                 type                : , //[string] 分頁器樣式： bullets 圓點/默認值 、fraction 分式(好比3/6)、progressbar 進度條、custom 自定義
 5                 bulletClass         : , // 分頁器內元素的類名。
 6                 bulletActiveClass   :  // 分頁器內活動(active)元素的類名
 7                 dynamicBullets      : , // [true | false]動態分頁器，當你的slide不少時，開啓後，分頁器小點的數量會部分隱藏。
 8                 dynamicMainBullets  : , // [number] 分頁器顯示的指示點數量。當頁數多時，但咱們只想顯示5個分頁點，能夠用這個來設置
 9                 clickable           : , // [true | false] 默認值爲false,此參數設置爲true時，點擊分頁器的指示點分頁器會控制Swiper切換。
10                                        // ... 更多配置見：http://www.swiper.com.cn/api/pagination/362.html
11             }
12 </script>

自定義分頁按鈕樣式代碼：

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31     .my-bullet{
32         width:10px;
33         height:10px;
34         display:inline-block;
35         background:#fff;
36         margin:0px 5px;
37         cursor:pointer;
38     }
39     .my-bullet-active{
40         width:100px;
41         height:10px;
42         border-radius:6px;
43         background:#000 !important;
44         display:inline-block;
45         margin:0px 5px;
46         cursor:pointer;
47     }
48 </style>
49 </head>
50 
51 <body>
52     <div class="swiper-container" id="sample">
53         <div class="swiper-wrapper">
54             <div class="swiper-slide">Slide 1</div>
55             <div class="swiper-slide">Slide 2</div>
56             <div class="swiper-slide">Slide 3</div>
57             <div class="swiper-slide">Slide 4</div>
58             <div class="swiper-slide">Slide 5</div>
59             <div class="swiper-slide">Slide 6</div>
60         </div>
61         <div class="swiper-button-prev" id="prev"></div>
62         <div class="swiper-button-next" id="next"></div>
63         
64          <div class="swiper-pagination"></div>
65     </div>
66     <div class="tip">使用CSS樣式控制分頁按鈕樣式</div>
67     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
68     <script>
69         var mySwiper = new Swiper('#sample',{
70             autoplay   : true,
71             navigation : {
72                 nextEl : '#next',
73                 prevEl : '#prev'
74             },
75             pagination: {
76                 el                : '.swiper-pagination',
77                 clickable         : true,
78                 type              : 'bullets',
79                 bulletClass       : 'my-bullet', // 分頁器內元素的類名。
80                 bulletActiveClass : 'my-bullet-active' // 分頁器內活動(active)元素的類名
81                 
82             }
83         });
84     </script>
85 </body>
86 </html>

演示十三：【翻頁特效】淡入、立體方塊、3D、翻轉（effect : [ slide位移切換 | fade淡入 | cube方塊 | coverflow 3D流 | flip 3D翻轉 ]）

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#fff;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31     .my-bullet{
32         width:10px;
33         height:10px;
34         display:inline-block;
35         background:#fff;
36         margin:0px 5px;
37         cursor:pointer;
38     }
39     .my-bullet-active{
40         width:100px;
41         height:10px;
42         border-radius:6px;
43         background:#000 !important;
44         display:inline-block;
45         margin:0px 5px;
46         cursor:pointer;
47     }
48 </style>
49 </head>
50 
51 <body>
52     <div class="swiper-container" id="sample">
53         <div class="swiper-wrapper">
54             <div class="swiper-slide">Slide 1</div>
55             <div class="swiper-slide">Slide 2</div>
56             <div class="swiper-slide">Slide 3</div>
57             <div class="swiper-slide">Slide 4</div>
58             <div class="swiper-slide">Slide 5</div>
59             <div class="swiper-slide">Slide 6</div>
60         </div>
61         <div class="swiper-button-prev" id="prev"></div>
62         <div class="swiper-button-next" id="next"></div>
63         
64          <div class="swiper-pagination"></div>
65     </div>
66     <div class="tip">參數effect控制翻屏特效，可選值： slide(默認，位移切換)、 fade(淡入) 、 cube（方塊）、 coverflow（3D流）、 flip（3D翻轉）</div>
67     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
68     <script>
69         var mySwiper = new Swiper('#sample',{
70             autoplay   : true,
71             navigation : {
72                 nextEl : '#next',
73                 prevEl : '#prev'
74             },
75             effect : 'cube'  // 這裏採用方塊顯示
76         });
77     </script>
78 </body>
79 </html>

演示十四：鼠標移上去中止播放，移出時恢復播放

 1 <!DOCTYPE html>
 2 <html lang="zh-cmn-Hans">
 3 <head>
 4 <meta charset="utf-8">
 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 6 <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
 8 <style>
 9     #sample {
10         width:500px;
11         height:300px;
12     }
13     .swiper-wrapper .swiper-slide{
14         color:#111;
15         text-align:center;
16         line-height:300px;
17     }
18     .swiper-wrapper .swiper-slide:nth-child(1){background:#F90;}
19     .swiper-wrapper .swiper-slide:nth-child(2){background:#390;}
20     .swiper-wrapper .swiper-slide:nth-child(3){background:#F63;}
21     .swiper-wrapper .swiper-slide:nth-child(4){background:#06C;}
22     .swiper-wrapper .swiper-slide:nth-child(5){background:#966;}
23     .swiper-wrapper .swiper-slide:nth-child(6){background:#363;}
24     .tip{
25         width:500px;
26         clear:both;
27         margin:auto;
28         color:#00F;
29         padding-top:10px;
30     }
31     .my-bullet{
32         width:10px;
33         height:10px;
34         display:inline-block;
35         background:#fff;
36         margin:0px 5px;
37         cursor:pointer;
38     }
39     .my-bullet-active{
40         width:100px;
41         height:10px;
42         border-radius:6px;
43         background:#000 !important;
44         display:inline-block;
45         margin:0px 5px;
46         cursor:pointer;
47     }
48 </style>
49 </head>
50 
51 <body>
52     <div class="swiper-container" id="sample">
53         <div class="swiper-wrapper">
54             <div class="swiper-slide">Slide 1</div>
55             <div class="swiper-slide">Slide 2</div>
56             <div class="swiper-slide">Slide 3</div>
57             <div class="swiper-slide">Slide 4</div>
58             <div class="swiper-slide">Slide 5</div>
59             <div class="swiper-slide">Slide 6</div>
60         </div>
61         <div class="swiper-button-prev" id="prev"></div>
62         <div class="swiper-button-next" id="next"></div>
63         
64          <div class="swiper-pagination"></div>
65     </div>
66     <div class="tip">鼠標移上去中止播放，移出去恢復播放</div>
67     <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
68     <script>
69         var mySwiper = new Swiper('#sample',{
70             autoplay   : true,
71             navigation : {
72                 nextEl : '#next',
73                 prevEl : '#prev'
74             }
75             
76         });
77         //鼠標覆蓋中止自動切換
78         mySwiper.el.onmouseover = function(){
79           mySwiper.autoplay.stop();
80         }
81         mySwiper.el.onmouseleave = function(){
82           mySwiper.autoplay.start();
83         }
84     </script>
85 </body>
86 </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。