Slippry-现代时尚的jQuery响应式幻灯片插件-HTML源码网

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) {
  return this;
}
```
onSlideBefore：过渡动画开始时的回调函数。
默认值：
```
function (slide, old_index, new_index) {
  return this;
}
```
onSlideAfter：过渡动画结束后的回调函数。
默认值：
```
function (slide, old_index, new_index) {
  return this;
}
```