Menu
Download

Responsive Resize your browser to see how responsive option works Window Width:

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

  $(document).ready(function() {
    $('#responsive').lightSlider({
        item:4,
        loop:false,
        slideMove:2,
        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
        speed:600,
        responsive : [
            {
                breakpoint:800,
                settings: {
                    item:3,
                    slideMove:1,
                    slideMargin:6,
                  }
            },
            {
                breakpoint:480,
                settings: {
                    item:2,
                    slideMove:1
                  }
            }
        ]
    });  
  });

Note

  • You can add as many breakpoints as you want.
  • supports item, slideMove, slideMargin, thumbItem, thumbMargin

Auto width this is responsive too! Window Width:

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10 

  $(document).ready(function() {
    $('#autoWidth').lightSlider({
        autoWidth:true,
        loop:true,
        onSliderLoad: function() {
            $('#autoWidth').removeClass('cS-hidden');
        } 
    });  
  });
<ul id="autoWidth" class="cs-hidden">
  <li class="item-a"></li>
  <li class="item-b"></li>
  <li class="item-c"></li>
  <li class="item-d"></li>
  <li class="item-e"></li>
</ul>
.item-a { width:200px; }
.item-b { width:340px; }
.item-c { width:290px; }
.item-d { width:220px; }
.item-e { width:350px; }
@media (max-width: 768px) {
    .item-a { width:100px; }
    .item-b { width:240px; }
    .item-c { width:190px; }
    .item-d { width:120px; }
    .item-e { width:250px; }
}

Note

  • cS-hidden is a utility css class to prevent displaying slider before execution (Optional)
  • It should remove once the slider is fully loaded 
.cS-hidden {
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0);
    overflow: hidden;
}

rtl mode

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

$(document).ready(function() {
    $('#rtl').lightSlider({
        rtl:true
    });
});

Integrate with lightGallery

Include lightGallery.js and lightGallery.css into your document.

When you use loop true use lightGallery selector property to avoid duplicate slides which is generated by lightslider ex: selector: '#imageGallery .lslide'

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />                  
<script src="js/lightGallery.js"></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'
            });
        }   
    });  
  });
<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>

AdaptiveHeight

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

$(document).ready(function() {
    $('#adaptive').lightSlider({
        adaptiveHeight:true,
        item:1,
        slideMargin:0,
        loop:true
    });
});

Vertical mode

  $(document).ready(function() {
    $('#vertical').lightSlider({
      gallery:true,
      item:1,
      vertical:true,
      verticalHeight:295,
      vThumbWidth:50,
      thumbItem:8,
      thumbMargin:4,
      slideMargin:0
    });  
  });
<ul id="vertical">
  <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>

Autoplay with loop, pause on hover, display slide count

1 of

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

$(document).ready(function() {
    var autoplaySlider = $('#autoplay').lightSlider({
        auto:true,
        loop:true,
        pauseOnHover: true,
        onBeforeSlide: function (el) {
            $('#current').text(el.getCurrentSlideCount());
        } 
    });
    $('#total').text(autoplaySlider.getTotalSlideCount());
});

Public Methods

  $(document).ready(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(); 
    });
    $('#addSlide').click(function() {

        // Class 'lslide' needs to be added with new slide item
        var newEl = ' <li class="lslide"> <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();    
    });
    $('#destroy').click(function(){
        slider.destroy();    
    });
    $('#rebuild').click(function(){
        if (!slider.lightSlider) {
            slider = $('#publicMethods').lightSlider({
                slideMargin:4,
                slideWidth:200,
                loop:false
            });  
        }
    });
  });

Callbacks

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

$(document).ready(function() {
  $('#callback').lightSlider({
    onBeforeStart: function (el) {
        console.log('onBeforeStart',el);
    },
    onSliderLoad: function (el) {
        el.addClass('classAddedBeforeSliderLoad');
    },
    onBeforeSlide: function (el) {
        alert('onBeforeSlide');
    },
    onAfterSlide: function (el) {
        alert('onAfterSlide');
    },
    onBeforeNextSlide: function (el) {
        alert('onBeforeNextSlide');
    },
    onBeforePrevSlide: function (el) {
        alert('onBeforePrevSlide');
    }
});
});

Please spread the word if you like lightSlider