内容来源于Swiper中文在线（http://www.swiper.com.cn/），由于Swiper功能强大，这里只将常用的功能列出来，方便开发。
这里统一使用Swiper最新版 4.0做为演示！
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
水平滑动：
扫描二维码关注公众号，回复：
1776610 查看本文章
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>