lightSlider轻量级响应式滑动图片插件

最大和最小滑动数量

  $(function() {
    $('#minMax').lightSlider({
      minSlide:2,
      maxSlide:4,
      slideMargin:5,
      slideWidth:200
    }); 
  });

每次滑动数量

  $(function() {
    $('#slideMove').lightSlider({
      slideMove:2,
      slideMargin:4,
      slideWidth:200
    }); 
  });

相册

  $(function() {
    $('#imageGallery').lightSlider({
      gallery:true,
      minSlide:1,
      maxSlide:1,
      currentPagerPosition:'left'  
    });  
  });

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

淡入淡出

$(function() {
  $('#fade').lightSlider({
    minSlide:1,
    maxSlide:1,
    mode:'fade'
  });  
});

调用方法

  $(function() {
    var slider = $('#publicMethods').lightSlider({
        slideMargin:4,
        slideWidth:200,
        loop:false
    });
    $('#goToSlide').click(function(){
        slider.goToSlide(3);    
    });
    $('#goToPrevSlide').click(function(){
        slider.goToPrevSlide(); 
    });
    $('#goToNextSlide').click(function(){
        slider.goToNextSlide(); 
    });
    $('#getCurrentSlideCount').click(function(){
        slider.getCurrentSlideCount(); 
    });
    $('#refresh').click(function() {
        var newEl = ' <li> <a href="javascript:void(0)"><img src="img/cS-1.jpg" /></a> </li>';
        $('#publicMethods').prepend(newEl);
        slider.refresh();
    });
    $('#play').click(function(){
        slider.play();    
    });
    $('#pause').click(function(){
        slider.pause();    
    });
  });