swiper.js完美的解决触摸滑动效果

Swiper 是一款免费以及轻量级的移动设备触控滑块的框架，使用硬件加速过渡（如果该设备支持的话）。主要使用与移动端的网站、网页应用程序（web apps），以及原生的应用程序（native apps）。主要是为IOS而设计的，同时，在Android、WP8系统以及现代桌面浏览器也有着良好的用户体验。

如何使用：

1、下载swiper最新版本https://github.com/nolimits4web/Swiper

2、在HTML Head中添加Swiper's CSS and JS:

....


   ....

其中引用的文件名以下载的为准。

3、使用下面的HTML布局

4、打开下载的文件中的idangerous.swiper.css，设置Swiper's的宽度以及高度（在文件的末尾）

/* 指定swiper 容器尺寸: */

.swiper-container, .swiper-slide {
  width: 500px;
  height: 200px;
}

5、初始化Swiper 在文档开始处，（或在窗口加载时）

DEMO： 这是一个带左右箭头，并且循环滚动的例子。可以直接复制代码查看

    
    
    

    
    

    
    


    
    

        

            
Slide 1
            
Slide 2
            
Slide 3
            
Slide 4
            
Slide 5
            
Slide 6
            
Slide 7
            
Slide 8
            
Slide 9
            
Slide 10