Swiper-强大的移动手机端幻灯片插件

Swiper是一款支持硬件加速过渡动画的移动手机幻灯片插件。该幻灯片可以很好的在iOS，Android，Windows Phone 8和桌面浏览器中工作。Swiper提供了大量参数和api，功能非常强大。

在线演示 下载

安装
可以通过bower来安装该幻灯片插件。

$ bower install swiper    

使用方法
使用该幻灯片插件需要引入swiper.css和swiper.js，你可以通过cdn加速来引入这些文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css">
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/js/swiper.jquery.min.js"></script>   

HTML结构
该幻灯片的基本HTML结构如下：

<!-- 幻灯片的容器 -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- 分页 -->
    <div class="swiper-pagination"></div>
     
    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
     
    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

CSS样式
你需要为幻灯片的容器设置一个宽度和高度：

.swiper-container {
    width: 600px;
    height: 300px;
}

初始化插件
可以通过下面的方法来初始化该幻灯片插件。

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true,
     
    // If we need pagination
    pagination: '.swiper-pagination',
     
    // Navigation arrows
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
     
    // And if we need scrollbar
    scrollbar: '.swiper-scrollbar',
  })                    

如果你使用jQuery或Zepto，可以使用下面的方法来初始化插件。

$(document).ready(function () {
  //initialize swiper when document ready  
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    loop: true
  })        
});  

配置参数
Swiper幻灯片的可用配置参数有：

参数	类型	默认值	描述
initialSlide	number	0	初始化的slide的序号
direction	string	'horizontal'	幻灯片的方向，可以是'horizontal' 或 'vertical'
speed	number	300	幻灯片的过渡动画速度
setWrapperSize	boolean	false	设置为true时，幻灯片会将容器的宽度和高度设置为slide的宽度和高度
virtualTranslate	boolean	false	Enabled this option and swiper will be operated as usual except it will not move, real translate values on wrapper will not be set. Useful when you may need to create custom slide transition
width	number		幻灯片的宽度
height	number		幻灯片的高度
autoHeight	boolean	false	设置为true时幻灯片自动适应每一个slide的高度
roundLengths	boolean	false	设置为true可以防止模糊文字的出现
nested	boolean	false	嵌套幻灯片，水平和垂直幻灯片相互嵌套
autoplay	number		自动播放的延迟时间，如果为设置将不自动播放
autoplayStopOnLast	boolean	false	是否到达最后一个slide时停止自动播放
autoplayDisableOnInteraction	boolean	true	设置为false时，用户滑动幻灯片后不会停止自动播放
watchSlidesProgress	boolean	false	是否计算每个slide的进度
watchSlidesVisibility	boolean	false	启用该选项时在视口中的slide将被添加额外的class
freeMode	boolean	false	如果设置为true，幻灯片将不会有固定的位置
freeModeMomentum	boolean	true	如果设置为true，幻灯片在滑动后会有一些惯性
freeModeMomentumRatio	number	1	值越大惯性越大
freeModeMomentumBounce	boolean	true	如果不想要惯性效果设置为false
freeModeMomentumBounceRatio	number	1	值越大弹性效果越强
freeModeMinimumVelocity	number	0.02	free mode的最小手指触摸速度
effect	string	'slide'	可以是"slide", "fade", "cube", "coverflow" 或 "flip"
fade	object	fade: { crossFade: false }	fade效果参数
cube	object	cube: { slideShadows: true, shadow: true, shadowOffset: 20, shadowScale: 0.94 }	立方体效果参数
coverflow	object	coverflow: { rotate: 50, stretch: 0, depth: 100, modifier: 1, slideShadows : true }	coverflow效果参数
flip	object	flip: { slideShadows : true limitRotation: true }	flip效果参数
parallax	boolean	false	设置为true时可以制作视觉差效果
spaceBetween	number	0	幻灯片slide之间的距离
slidesPerView	number 或 'auto'	1	幻灯片每一个视图的数量
slidesPerColumn	number	1	幻灯片每一列的数量
slidesPerColumnFill	string	'column'	幻灯片如何填充行和列，可以是column' 或 'row'
slidesPerGroup	number	1	幻灯片分组
centeredSlides	boolean	false	设置为true时，当前激活的幻灯片居中显示
slidesOffsetBefore	number	0	在容器中第一个幻灯片slide之前添加一些空白的像素，单位像素
slidesOffsetAfter	number	0	在容器中最后一个幻灯片slide之后添加一些空白的像素，单位像素
grabCursor	boolean	false	在桌面设备中设置为true，鼠标光标变为grab形状
touchEventsTarget	string	'container'	touch事件监听的目标元素
touchRatio	number	1	Touch ration
touchAngle	number	45	移触摸的触发角度
simulateTouch	boolean	true	是否接收鼠标事件
shortSwipes	boolean	true	设置为false禁止short swipes
longSwipes	boolean	true	设置为false禁止long swipes
longSwipesRatio	number	0.5	在long swipes中触发next/previous滑动的比例
longSwipesMs	number	300	在long swipes中触发next/previous滑动最小持续时间（毫秒）
followFinger	boolean	true	如设置为false，幻灯片只有在手指释放时才动画
onlyExternal	boolean	false	如果设置为true，那么只有通过API来切换幻灯片
threshold	number	0	阈值，单位像素
touchMoveStopPropagation	boolean	true	设置为true时，分页的“touchmove”被禁止
iOSEdgeSwipeDetection	boolean	false	Enable to release Swiper events for swipe-to-go-back work in iOS UIWebView
iOSEdgeSwipeThreshold	number	20	Area (in px) from left edge of the screen to release touch events for swipe-to-go-back in iOS UIWebView