轻量级触摸响应滑块插件JQuery lightSlider

查看演示立即下载

插件描述：JQuery lightSlider 是一个轻量级触摸响应滑块插件(5KB缩减)

JQuery lightSlider 是一个轻量级触摸响应滑块插件(5KB缩减)

如何使用 lightSlider？

将下面的代码添加到您的文档<head>。

<link type="text/css" rel="stylesheet" href="css/lightSlider.css" />                  
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/lightSlider.js"></script>
// Do not include both lightSlider.js and lightSlider.min.js

HTML 结构

<ul id="lightSlider">
  <li>
      <h3>First Slide</h3>
      <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
  </li>
  <li>
      <h3>Second Slide</h3>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  ...
</ul>

调用 lightSlider!

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });
</script>

设置

<script type="text/javascript">
$(document).ready(function() {
    $("#lightSlider").lightSlider({
        slideWidth:270,
        slideMargin:0,
        slideMove:1,
        minSlide:1,
        maxSlide:8,
  
        pager:true,
        controls:true,
        prevHtml:'',
        nextHtml:'',
        keyPress:true,
        thumbWidth:50,
        thumbMargin:3,
        gallery:false,
        currentPagerPosition:'middle',
         
        useCSS:true,
        auto: false,
        pause: 2000,
        loop:true,
        easing: '',
        speed: 1000,
        mode:"slide",
        swipeThreshold:10,
  
        onBeforeStart: function(){},
        onSliderLoad: function() {},
        onBefroreSlide:function(){},
        onAfterSlide:function(){},
        onBeforeNextSlide: function(){},
        onBeforePrevSlide: function(){}
    });
});
</script>
公共方法
<script type="text/javascript">
  $(document).ready(function() {
    var slider = $("#lightSlider").lightSlider();
    slider.goToSlide(3);
    slider.goToPrevSlide();
    slider.goToNextSlide();
    slider.getCurrentSlideCount();
    slider.refresh();
  });
</script>

各项参数解释：(感谢飘飞的夏秋提供)

$("#lightSlider").lightSlider({
 
    slideWidth: 270,
    //宽度
    slideMargin: 0,
    //间距
    slideMove: 1,
    //一次滚动1张
    minSlide: 1,
    //最少显示一张
    maxSlide: 8,
    //最大显示8张
    pager: true,
    //分页
    controls: true,
    //显示按钮
    prevHtml: '',
    //上一张按钮html内容
    nextHtml: '',
    //下一张按钮html内容
    keyPress: true,
    //支持键盘操作
    thumbWidth: 50,
    //缩略图宽
    thumbMargin: 3,
    //缩略图间距
    gallery: false,
    //是否使用画廊
    currentPagerPosition: 'middle',
    //当前页显示的方式
    useCSS: true,
    //是否使用CSS样式
    auto: false,
    //是否自动播放
    pause: 2000,
    //播放的间隔时间
    loop: true,
    //是否循环播入
    easing: '',
    //使用的动画效果
    speed: 1000,
    //动画时间
    mode: "slide",
    //使用的模式
    swipeThreshold: 10,
    动画缓冲阀值
 
    onBeforeStart: function() {},
    //初始前执行的函数
    onSliderLoad: function() {},
    //加载时执行的函数
    onBefroreSlide: function() {},
    //滚动开始前执行的函数
    onAfterSlide: function() {},
    //滚动开始后执行的函数
    onBeforeNextSlide: function() {},
    //下一滚动时执行的函数
    onBeforePrevSlide: function() {} //上一帧动画时执行的函数
});

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jquery旋转木马插件SLICK
下一个特效： jQuery 同宽网格插件 Elastic Columns