• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

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

当前位置：网站建设 > 技术支持

 基于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) {  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幻灯片并重新初始化它。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。