jQuery幻灯片轮播插件Slippry 使用方法 配置参数

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

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

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

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

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

回调函数

• 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幻灯片并重新初始化它。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！