swiper的使用教程

swiper的使用教程

今天要分享的是swiper这个插件的使用，什么是swiper呢？

Swiper常用于移动端网站的内容触摸滑动；
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

初学者使用swiper的时候，可以在官网（http://www.swiper.com.cn/）学，但是一开始的时候，建议不要直接看它的API文档。可以在先下载swiper，选择swiper-3.4.2完整压缩包下载，然后可以看它里面demos中的效果，你需要哪个效果，就用哪个！

使用方法（以其中demos中第21个效果为例）：

1、引用JS和css文件

[html]  view plain  copy

1. <link rel="stylesheet" href="path/to/swiper.min.css">  
2. <script src="path/to/swiper.min.js"></script>  

2、在body中加入以下格式的HTML格式

[html]  view plain  copy

1. <div class="swiper-container">  
2.     <div class="swiper-wrapper">  
3.         <div class="swiper-slide">Slide 1</div>  
4.         <div class="swiper-slide">Slide 2</div>  
5.         <div class="swiper-slide">Slide 3</div>  
6.     </div>  
7.     <!-- 如果需要分页器 -->  
8.     <div class="swiper-pagination"></div>  
9.       
10.     <!-- 如果需要导航按钮 -->  
11.     <div class="swiper-button-prev"></div>  
12.     <div class="swiper-button-next"></div>  
13.       
14.     <!-- 如果需要滚动条 -->  
15.     <div class="swiper-scrollbar"></div>  
16. </div>  
17. 导航等组件可以放在container之外  

3、在script中加入以下js代码

[html]  view plain  copy

1. <script>  
2.  var swiper = new Swiper('.swiper-container', {  
3.      pagination: '.swiper-pagination',  
4.      nextButton: '.swiper-button-next',  
5.      prevButton: '.swiper-button-prev',  
6.      paginationClickable: true,  
7.      spaceBetween: 30,  
8.      centeredSlides: true,  
9.      autoplay: 2500,  
10.      autoplayDisableOnInteraction: false  
11.  });  
12.  </script>  

4、在head中加入css样式

[html]  view plain  copy

1. <style>  
2.     html, body {  
3.         position: relative;  
4.         height: 100%;  
5.     }  
6.     body {  
7.         background: #eee;  
8.         font-family: Helvetica Neue, Helvetica, Arial, sans-serif;  
9.         font-size: 14px;  
10.         color:#000;  
11.         margin: 0;  
12.         padding: 0;  
13.     }  
14.     .swiper-container {  
15.         width: 100%;  
16.         height: 100%;  
17.   
18.     }  
19.     .swiper-slide {  
20.         text-align: center;  
21.         font-size: 18px;  
22.         background: #fff;  
23.   
24.         /* Center slide text vertically */  
25.         display: -webkit-box;  
26.         display: -ms-flexbox;  
27.         display: -webkit-flex;  
28.         display: flex;  
29.         -webkit-box-pack: center;  
30.         -ms-flex-pack: center;  
31.         -webkit-justify-content: center;  
32.         justify-content: center;  
33.         -webkit-box-align: center;  
34.         -ms-flex-align: center;  
35.         -webkit-align-items: center;  
36.         align-items: center;  
37.     }  
38.     </style>  

至此就完成了一个简单的轮播，然后还有先script中要加的参数，我们可以在API文档中进行查阅，并添加。

注意的是：HTML中class的名字不能换，不要问为什么，就是那样用就OK了！

原创来自：http://blog.csdn.net/cq7421/article/details/77937080