Swiper 常用功能及配置清单
内容来源于Swiper中文在线（http://www.swiper.com.cn/），由于Swiper功能强大，这里只将常用的功能列出来，方便开发。
这里统一使用Swiper最新版 4.0做为演示！
Swiper 有向个必需要注意的事项：
a) 默认是不自动播放的，需要手动开启：
1 autoplay: { 2 delay: 2500, // 自动播放间隔，单位ms 3 disableOnInteraction: false, // 值为false表示用户操作swiper之后，不会停止播放，值true停止 4 },
b) 默认点击分页器按钮是无法自动分页的，需要手动开启：
1 pagination :{ 2 el: '.swiper-pagination', 3 clickable :true, // 开启分页按钮点击分页 4 }
c) 单独设置每个slide的停留时间，需要在slide增加属性，示例：
1 <div class="swiper-slide" data-swiper-autoplay="5000">增加了data-swiper-autoplay属性</div>
d) 实现循环翻屏模式，需要开启loop
1 loop : true
e) 实现自定义分页器样式，需要通过CSS控制，实例见演示十二
f) 默认swiper在PC端可以通过鼠标模板滑动效果，如果想关闭需要配置 simulateTouch 属性：
1 simulateTouch : false //禁止鼠标模拟
1、引用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>
2、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>
3、创建Swiper实例：
语法：
1 new Swiper(swiperContainer, parameters)
参数：
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.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 /** 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">1、第二个slide停留5秒，其它的停留1秒<br/>2、用户操作后不中止自动播放<br/>3、播放到最后时反转播放</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">1、每屏从开始滑动到结束滑动，用5秒来完成<br/>2、自动轮播，每屏停留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>
