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

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类：

Slippry幻灯片插件可用的配置参数有：

Slippry幻灯片插件的控制相关的参数：

Slippry幻灯片插件过渡动画相关参数：

Slippry幻灯片插件slideshow相关参数：

回调函数

• onSliderLoad：幻灯片加载完成后触发。

  默认值：

  function (index) {
    return this;
  }
  

• onSlideBefore：过渡动画开始时的回调函数。

  默认值：

  function (slide, old_index, new_index) {
    return this;
  }
  

• onSlideAfter：过渡动画结束后的回调函数。

  默认值：

  function (slide, old_index, new_index) {
    return this;
  }
  

公共方法

• getCurrentSlide：返回当前slide的jQuery对象。
• getSlideCount：返回幻灯片的数量。
• goToSlide：跳转到指定的slide。
• goToNextSlide：跳转到下一个slide。
• goToPrevSlide：跳转到前一个slide。
• startAuto：自动开始播放幻灯片。
• stopAuto：停止自动播放幻灯片。
• refresh：重新初始化已经被初始化的幻灯片。
• destroySlider：销毁Slippry幻灯片并重置为原始的标签。
• reloadSlider：销毁Slippry幻灯片并重新初始化它。

Slippry幻灯片插件的官方网址为：http://slippry.com/