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>