jQuery幻灯片轮播插件Slippry 使用方法 配置参数 – js/jQuery – 前端 jquery .context

Slippry是一款时尚现代的jQuery响应式幻灯片插件。该幻灯片插件使用HTML5、CSS3和jQuery来制作，它100%的响应式设计，并且使用起来简单方便。

使用方法：

使用该幻灯片插件需要引入jQuery和slippry.js、slippry.css文件。

<linkrel="stylesheet"href="slippry.css"><scriptsrc="jquery.min.js"></script><scriptsrc="slippry.js"></script>

HTML结构：

该幻灯片的基本HTML结构使用的是无序列表的结构。

<ulid="slippry-demo"><li><ahref="#slide1"><imgsrc="assets/img/slippry-01.jpg"alt="..."></a></li><li><ahref="#slide2"><imgsrc="assets/img/slippry-02.jpg"alt="..."></a></li><li><ahref="#slide3"><imgsrc="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：幻灯片加载完成后触发。

默认值：

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

默认值：

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

默认值：

公共方法

getCurrentSlide：返回当前slide的jQuery对象。

getSlideCount：返回幻灯片的数量。

goToSlide：跳转到指定的slide。

goToNextSlide：跳转到下一个slide。

goToPrevSlide：跳转到前一个slide。

startAuto：自动开始播放幻灯片。

stopAuto：停止自动播放幻灯片。

refresh：重新初始化已经被初始化的幻灯片。

destroySlider：销毁Slippry幻灯片并重置为原始的标签。

reloadSlider：销毁Slippry幻灯片并重新初始化它。