项目地址：https://github.com/sachinchoolur/lightslider

实例演示：http://sachinchoolur.github.io/lightslider/

在线编辑：JsFiddle  |  Codepen

lightslider是一款轻量级的响应式jQuery幻灯片插件。lightslider幻灯片插件能够支持移动触摸设备，它可以制作为带缩略图的内容幻灯片，或者制作为无限循环的旋转木马。它的特点还有：

• 完全响应式设计，自动适配任何设备。
• 可以单独设置每一个breakpoint。
• 画廊模式中可以创建带缩略图的幻灯片。
• 支持移动手机的swipe和触摸拖拽。
• 可动态添加或删除幻灯片。
• 文件体积小，主题丰富，实现简单。
• 采用CSS过渡效果，不支持CSS过渡效果的浏览器中使用jQuery来回退。
• 提供丰富的回调函数和公开方法。
• 提供自动播放和无限循环的旋转木马模式。
• 支持键盘、箭头和圆点导航。
• 跨浏览器、跨设备：Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone。
• 同一个页面中可以生成多个幻灯片实例。
• 幻灯片的内容可以是图片、视频等。

$ bower install lightslider
$ npm install lightslider

或者下载压缩包，在页面中引入以下文件。

<link type="text/css" rel="stylesheet" href="css/lightslider.css" />
<script src="js/jquery.min.js"></script>
<script src="js/lightslider.js"></script>

或者用cdn文件（cdn 网站）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.js"></script>

使用方法

 HTML结构

lightslider幻灯片的基本HTML结构如下：

<ul id="light-slider">
    <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>

如果要添加缩略图，那么使用（官方实例）：

<ul id="imageGallery">
  <li data-thumb="img/thumb/cS-1.jpg" data-src="img/largeImage.jpg">
    <img src="img/cS-1.jpg" />
  </li>
  <li data-thumb="img/thumb/cS-2.jpg" data-src="img/largeImage1.jpg">
    <img src="img/cS-2.jpg" />
  </li>
</ul>

初始化插件

在页面DOM元素加载完毕之后，可以通过lightSlider()方法来初始化该幻灯片插件。

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

如果是缩略图的话，用：

  $(document).ready(function() {
    $('#imageGallery').lightSlider({
        gallery:true,
        item:1,
        loop:true,
        thumbItem:9,
        slideMargin:0,
        enableDrag: false,
        currentPagerPosition:'left',
        onSliderLoad: function(el) {
            el.lightGallery({
                selector: '#imageGallery .lslide'
            });
        }   
    });  
  });

Play with settings

<script type="text/javascript">
$(document).ready(function() {
    $("#lightSlider").lightSlider({
        item: 3,
        autoWidth: false,
        slideMove: 1, // slidemove will be 1 if loop is true
        slideMargin: 10,
 
        addClass: '',
        mode: "slide",
        useCSS: true,
        cssEasing: 'ease', //'cubic-bezier(0.25, 0, 0.25, 1)',//
        easing: 'linear', //'for jquery animation',////
 
        speed: 400, //ms'
        auto: false,
        loop: false,
        slideEndAnimation: true,
        pause: 2000,
 
        keyPress: false,
        controls: true,
        prevHtml: '',
        nextHtml: '',
 
        rtl:false,
        adaptiveHeight:false,
 
        vertical:false,
        verticalHeight:500,
        vThumbWidth:100,
 
        thumbItem:10,
        pager: true,
        gallery: false,
        galleryMargin: 5,
        thumbMargin: 5,
        currentPagerPosition: 'middle',
 
        enableTouch:true,
        enableDrag:true,
        freeMove:true,
        swipeThreshold: 40,
 
        responsive : [],
 
        onBeforeStart: function (el) {},
        onSliderLoad: function (el) {},
        onBeforeSlide: function (el) {},
        onAfterSlide: function (el) {},
        onBeforeNextSlide: function (el) {},
        onBeforePrevSlide: function (el) {}
    });
});
</script>

Public methods

<script type="text/javascript">
  $(document).ready(function() {
    var slider = $("#lightSlider").lightSlider();
    slider.goToSlide(3);
    slider.goToPrevSlide();
    slider.goToNextSlide();
    slider.getCurrentSlideCount();
    slider.refresh();
    slider.play(); 
    slider.pause();    
  });
</script>

配置参数

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

 回调函数

 公开方法

使用延迟加载lazy load，How do I lazy load images in JQuery lightSlider?

onSliderLoad: function (el) {
    var showActiveSlides = function (entries) {
        entries.forEach(function (entry) {
            if (entry.isIntersecting) {
                entry.target.src = entry.target.dataset.src;
                observer.unobserve(entry.target);
            }
        });
    };

    var imageWidth = el.find("li").outerWidth() + "px";

    var observer = new window.IntersectionObserver(showActiveSlides, {
        root: el.parent()[0],
        rootMargin: "0px "+ imageWidth + " 0px " + imageWidth
    });

    el.find("li img").each(function () {
        observer.observe(this);
    });
}

实例：

$("#lightSlider").lightSlider({
  item: 4,
  autoWidth: false,
  slideMargin: 1,
  mode: "slide",
  useCSS: true,
  cssEasing: 'ease',
  easing: 'linear',
  auto: true,
  loop: true,
  slideEndAnimation: true,
  pause: 4000,
  pauseOnHover: true,
  pager: false,
  enableDrag: false,
  onSliderLoad: function(el) {
    var showActiveSlides = function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          entry.target.src = entry.target.dataset.src;
          observer.unobserve(entry.target);
        }
      });
    };

    var imageWidth = el.find("li").outerWidth() + "px";

    var observer = new window.IntersectionObserver(showActiveSlides, {
      root: el.parent()[0],
      rootMargin: "0px " + imageWidth + " 0px " + imageWidth
    });

    el.find("li img").each(function() {
      observer.observe(this);
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/css/lightslider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.6/js/lightslider.min.js"></script>

<ul id="lightSlider" style="background: red;">
  <li><img data-src="https://picsum.photos/100?random=1"></li>
  <li><img data-src="https://picsum.photos/100?random=2"></li>
  <li><img data-src="https://picsum.photos/100?random=3"></li>
  <li><img data-src="https://picsum.photos/100?random=4"></li>
  <li><img data-src="https://picsum.photos/100?random=5"></li>
  <li><img data-src="https://picsum.photos/100?random=6"></li>
  <li><img data-src="https://picsum.photos/100?random=7"></li>
  <li><img data-src="https://picsum.photos/100?random=8"></li>
</ul>

onSliderLoad 事件也可以换成 onBeforeStart

本文：轻量级响应滑块插件JQuery lightSlider, jQuery幻灯片插件, jQuery Slider with thumbnails, jQuery Slider with image thumbnails, JQuery lightSlider