JQuery lightSlider

JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation

Demo Try it JsFiddleCodepen

Main Features

  • Fully responsive - will adapt to any device.
  • Separate settings per breakpoint.
  • Gallery mode to create an image slideshow with thumbnails
  • Supports swipe and mouseDrag
  • Add or remove slides dynamically.
  • Small file size, fully themed, simple to implement.
  • CSS transitions with jQuery fallback.
  • Full callback API and public methods.
  • Auto play and infinite loop to create a content carousel.
  • Keyboard, arrows and dots navigation.
  • Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone.
  • Slide and Fade Effects.
  • Auto width, Vertical Slide, Adaptiveheight, Rtl support...
  • Multiple instances on one page.
  • Slide anything (youtube, vimeo , google map ...)
  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

How to use lightSlider?

The Code

add the Following code to the <head> of your document.

<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>
// Do not include both lightslider.js and lightslider.min.js

HTML Structure

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

Call lightSlider!

<script type="text/javascript">
  $(document).ready(function() {
    $("#lightSlider").lightSlider(); 
  });
</script>

Play with settings

<script type="text/javascript">
$(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>

Public methods

<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>
Think you can improve this page? fork me on github

Please spread the word if you like lightSlider