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

老白 1周前 16浏览 0评论

 基于jQuery幻灯片轮播插件Slippry个人非常喜欢,主要是在制作响应式模板的时候可以自适应不同宽度的移动设备,整个幻灯片可以等比例进行缩放,不需要额外CSS设置了!

基于jQuery幻灯片插件Slippry.png jQuery幻灯片轮播插件Slippry 使用方法 配置参数 js/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类:

参数默认值可用值描述
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中有效的字符串
elementsslide元素'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而改变truetrue, false
start最先显示的slide1integer (1 = first slide), random
loop幻灯片是否循环显示truetrue, false
captionsSrc指定标题的来源。如果是图片,标题为titlealt中的内容,其它元素则使用title作为标题'img''img' or any element
captions指定标题的位置或根本没有标题'overlay''overlay', 'below', 'custom', false
captionsEl放标题的元素,注意它可以在.slippry_box之外'.sy-caption'任何jQuery选择器
initSingle是否在只有一个slide的时候也初始化幻灯片truetrue, false
responsive是否开启幻灯片的响应式效果truetrue, false
preload在幻灯片显示前预加载的元素'visible''visible', 'all'
pager是否为幻灯片添加分页导航truetrue, false

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

参数默认值可用值描述
controls是否开启幻灯片的前后导航按钮truetrue, false
controlClass控制按钮容器的class'sy-controls'任何在CSS中有效的字符串
prevClass向前控制按钮的class名称'sy-prev任何在CSS中有效的字符串
prevText向前按钮的文本'Previous'任何文本字符串
nextClass向后控制按钮的class名称'sy-next'任何在CSS中有效的字符串
nextText向后按钮的文本'Next'任何文本字符串
hideOnEnd当到达最前或最后时隐藏向前或向后按钮truetrue, false

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

参数默认值可用值描述
transition过渡动画的类型'fade''fade', 'horizontal', 'vertical', 'kenburns', false
kenZoomKen Burns效果的最大缩放级别120任何百分比值
slidemargin两个slides之前的空隙0百分比值
transClass在过渡动画时附加在slide元素上的class'transition'任何在CSS中有效的字符串
speed过渡动画的持续时间800任何数值,单位毫秒
easing选择的过渡动画的easing效果'swing'任何可用的easing效果,可以参考这里
continuous幻灯片是否连续(第一幅图片和最后一幅图片之间是否动画过渡)truetrue, false
useCSS幻灯片是否使用CSS过渡动画。如果用户的浏览器不支持CSS动画,将会回退到jQuery过渡动画truetrue, false

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

参数默认值可用值描述
auto幻灯片在加载后是否自动播放truetrue, false
autoDirection自动播放模式下幻灯片的运动方向'next''next', 'prev'
autoHover幻灯片是否在鼠标滑过时暂停播放truetrue, 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;
    }

公共方法

  • getCurrentSlide:返回当前slide的jQuery对象。

  • getSlideCount:返回幻灯片的数量。

  • goToSlide:跳转到指定的slide。

  • goToNextSlide:跳转到下一个slide。

  • goToPrevSlide:跳转到前一个slide。

  • startAuto:自动开始播放幻灯片。

  • stopAuto:停止自动播放幻灯片。

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

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

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

 

评论