插件簡介

lightslider是一款輕量級的響應式jQuery幻燈片插件。lightslider幻燈片插件能夠支持移動觸摸設備，它可以制作為帶縮略圖的內容幻燈片，或者制作為無限循環的旋轉木馬。它的特點還有：

下載地址

在線演示

下載地址：http://www.jqhtml.com/5633.html

功能

• 完全響應式設計，自動適配任何設備。
• 可以單獨設置每一個breakpoint。
• 畫廊模式中可以創建帶縮略圖的幻燈片。
• 支持移動手機的swipe和觸摸拖拽。
• 可動態添加或刪除幻燈片。
• 文件體積小，主題豐富，實現簡單。
• 采用CSS過渡效果，不支持CSS過渡效果的瀏覽器中使用jQuery來回退。
• 提供豐富的回調函數和公開方法。
• 提供自動播放和無限循環的旋轉木馬模式。
• 支持鍵盤、箭頭和圓點導航。
• 跨瀏覽器、跨設備：Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone。
• 同一個頁面中可以生成多個幻燈片實例。
• 幻燈片的內容可以是圖片、視頻等。

安裝

可以通過npm或bower來安裝該幻燈片插件。

$ bower install lightslider
$ npm install lightslider

也可以下載安裝包，在頁面中引入文件 插件下載地址http://www.jqhtml.com/5633.html
官方地址 http://sachinchoolur.github.io/lightslider/index.html

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

使用方法

HTML結構

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

初使化插件

  $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });

參數設置示例

  $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });
Play with settings
$(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 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>

lightslider-支持移動觸摸的輕量級jQuery幻燈片插件