基于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幻燈片并重新初始化它。