JQuery.lightSlider轻量级幻灯片效果

使用方法
引用相关文件
<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>

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>

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

相关设置
<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>