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 |
完整的配置参数，回调函数级API请参考：Swiper API
Swiper幻灯片插件的github地址为：https://github.com/nolimits4web/Swiper
