基于jQuery的幻灯片轮播插件Slippry个人非常喜欢，主要是在制作响应式模板的时候可以自适应不同宽度的移动设备，整个幻灯片可以等比例进行缩放，不需要额外CSS设置了！
Slippry是一款时尚现代的jQuery响应式幻灯片插件。该幻灯片插件使用HTML5、CSS3和jQuery来制作，它100%的响应式设计，并且使用起来简单方便。
使用方法：
使用该幻灯片插件需要引入jQuery和slippry.js、slippry.css文件。
<link rel="stylesheet" href="slippry.css"> <script src="jquery.min.js"> </script> <script src="slippry.js"></script>
HTML结构：
该幻灯片的基本HTML结构使用的是无序列表的结构。
<ul id="slippry-demo"> <li> <a href="#slide1"> <img src="assets/img/slippry-01.jpg" alt="..."> </a> </li> <li> <a href="#slide2"> <img src="assets/img/slippry-02.jpg" alt="..."> </a> </li> <li> <a href="#slide3"> <img src="assets/img/slippry-03.jpg" alt="..."> </a> </li> </ul>
初始化插件：
在页面DOM元素加载完毕之后，可以通过slippry()方法来初始化该幻灯片插件。
jQuery(document).ready(function(){
jQuery('selector').slippry()
});配置参数：
Slippry幻灯片插件的元素和包裹容器class类：
| 参数 | 默认值 | 可用值 | 描述 |
| slippryWrapper | 整个幻灯片（包括分页）的包裹容器 | '<div class="sy-box" />' | 任何有效的HTML元素，建议使用<div>或<section>元素 |
| slideWrapper | 幻灯片和控制按钮的包裹元素 | '<div class="sy-slides-wrap" />' | 任何有效的HTML元素，建议使用<div>或<section>元素 |
| slideCrop | 幻灯片的包裹元素 | '<div class="sy-slides-crop" />' | 任何有效的HTML元素，建议使用<div>或<section>元素 |
| boxClass | 原始slide父元素的class名称（例如<ul>元素） | 'sy-list' | 任何CSS中有效的字符串 |
| elements | slide元素 | 'li' | 任何有效的HTML元素，建议使用<li>、<div>、<article>或<section>元素 |
| activeClass | 当前激活（可见）的slide的class | 'sy-active' | 任何CSS中有效的字符串 |
| fillerClass | 占位元素的class | 'sy-filler' | 任何CSS中有效的字符串 |
| loadingClass | 在幻灯片开始加载是添加到"slippry_wrapper"上的class | 'sy-loading' | 任何CSS中有效的字符串 |
| pagerClass | 添加到slider容器上的class | 'sy-pager' | 任何CSS中有效的字符串 |
Slippry幻灯片插件可用的配置参数有：
| 参数 | 默认值 | 可用值 | 描述 |
| adaptiveHeight | 幻灯片的高度是否根据当前slide而改变 | true | true, false |
| start | 最先显示的slide | 1 | integer (1 = first slide), random |
| loop | 幻灯片是否循环显示 | true | true, false |
| captionsSrc | 指定标题的来源。如果是图片，标题为title或alt中的内容，其它元素则使用title作为标题 | 'img' | 'img' or any element |
| captions | 指定标题的位置或根本没有标题 | 'overlay' | 'overlay', 'below', 'custom', false |
| captionsEl | 放标题的元素，注意它可以在.slippry_box之外 | '.sy-caption' | 任何jQuery选择器 |
| initSingle | 是否在只有一个slide的时候也初始化幻灯片 | true | true, false |
| responsive | 是否开启幻灯片的响应式效果 | true | true, false |
| preload | 在幻灯片显示前预加载的元素 | 'visible' | 'visible', 'all' |
| pager | 是否为幻灯片添加分页导航 | true | true, false |
Slippry幻灯片插件的控制相关的参数：
| 参数 | 默认值 | 可用值 | 描述 |
| controls | 是否开启幻灯片的前后导航按钮 | true | true, false |
| controlClass | 控制按钮容器的class | 'sy-controls' | 任何在CSS中有效的字符串 |
| prevClass | 向前控制按钮的class名称 | 'sy-prev | 任何在CSS中有效的字符串 |
| prevText | 向前按钮的文本 | 'Previous' | 任何文本字符串 |
| nextClass | 向后控制按钮的class名称 | 'sy-next' | 任何在CSS中有效的字符串 |
| nextText | 向后按钮的文本 | 'Next' | 任何文本字符串 |
| hideOnEnd | 当到达最前或最后时隐藏向前或向后按钮 | true | true, false |
Slippry幻灯片插件过渡动画相关参数：
| 参数 | 默认值 | 可用值 | 描述 |
| transition | 过渡动画的类型 | 'fade' | 'fade', 'horizontal', 'vertical', 'kenburns', false |
| kenZoom | Ken Burns效果的最大缩放级别 | 120 | 任何百分比值 |
| slideMargin | 两个slides之前的空隙 | 0 | 百分比值 |
| transClass | 在过渡动画时附加在slide元素上的class | 'transition' | 任何在CSS中有效的字符串 |
| speed | 过渡动画的持续时间 | 800 | 任何数值，单位毫秒 |
| easing | 选择的过渡动画的easing效果 | 'swing' | 任何可用的easing效果，可以参考这里 |
| continuous | 幻灯片是否连续（第一幅图片和最后一幅图片之间是否动画过渡） | true | true, false |
| useCSS | 幻灯片是否使用CSS过渡动画。如果用户的浏览器不支持CSS动画，将会回退到jQuery过渡动画 | true | true, false |
Slippry幻灯片插件slideshow相关参数：
| 参数 | 默认值 | 可用值 | 描述 |
| auto | 幻灯片在加载后是否自动播放 | true | true, false |
| autoDirection | 自动播放模式下幻灯片的运动方向 | 'next' | 'next', 'prev' |
| autoHover | 幻灯片是否在鼠标滑过时暂停播放 | true | true, false |
| autoHoverDelay | 在鼠标滑过幻灯片之后恢复自动播放模式的延迟时间 | 100 | 任何数值，单位毫秒 |
| autoDelay | 在加载之后幻灯片自动播放前的延迟时间 | 500 | 任何数值，单位毫秒 |
| pause | 幻灯片的持续时间 | 3000 | 任何数值，单位毫秒 |
回调函数
onSliderLoad：幻灯片加载完成后触发。默认值：
function(index) {returnthis;}onSlideBefore：过渡动画开始时的回调函数。默认值：
function(slide, old_index, new_index) {returnthis;}onSlideAfter：过渡动画结束后的回调函数。默认值：
function(slide, old_index, new_index) {returnthis;}
公共方法
getCurrentSlide：返回当前slide的jQuery对象。getSlideCount：返回幻灯片的数量。goToSlide：跳转到指定的slide。goToNextSlide：跳转到下一个slide。goToPrevSlide：跳转到前一个slide。startAuto：自动开始播放幻灯片。stopAuto：停止自动播放幻灯片。refresh：重新初始化已经被初始化的幻灯片。destroySlider：销毁Slippry幻灯片并重置为原始的标签。reloadSlider：销毁Slippry幻灯片并重新初始化它。