外掛簡介

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

<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>