Submit your widget

lightslider - jQuery lightSlider is a lightweight responsive content slider - carousel with animated thumbnails navigation

Created 5 years ago   Views 9702   downloads 1487    Author sachinchoolur
View DemoDownload
Share |

jQuery lightSlider

JQuery lightSlider demo

JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation ( 9KB minified )

  • Infinite loop.
  • Auto width.
  • SlideEnd animation.
  • Improved swipe support.
  • Improved perfomance.
  • Separate settings per breakpoints.
  • RTL support.
  • AdaptiveHeight.
  • Vertical mode
  • MouseDrag support for desktop browsers.
  • Improved swipe support.
  • Slide item instead of slideWidth.
  • ThumbItem instead of thumbwidth.
  • slidewidth.
  • minslide
  • maxslide
  • thumbWidth
  • 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 (7kb) (minified), 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 ...)

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

<link type="text/css" rel="stylesheet" href="css/lightSlider.css" />
<script src="//"></script>
<script src="js/lightSlider.js"></script>
    // Do not include both lightSlider.js and lightSlider.min.js
<ul id="lightSlider">
        <h3>First Slide</h3>
        <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
        <h3>Second Slide</h3>
        <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
<script type="text/javascript">
    $(document).ready(function() {
<script type="text/javascript">
    $(document).ready(function() {
            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,
            slideEndAnimatoin: true,
            pause: 2000,
            keyPress: false,
            controls: true,
            prevHtml: '',
            nextHtml: '',
            pager: true,
            gallery: false,
            galleryMargin: 5,
            thumbMargin: 5,
            currentPagerPosition: 'middle',
            swipeThreshold: 40,
            responsive : [],
            onBeforeStartfunction (el) {},
            onSliderLoadfunction (el) {},
            onBeforeSlidefunction (el) {},
            onAfterSlidefunction (el) {},
            onBeforeNextSlidefunction (el) {},
            onBeforePrevSlidefunction (el) {}
<script type="text/javascript">
    $(document).ready(function() {
        var slider = $("#lightSlider").lightSlider();

Email me if you have any questions or feedbacks regarding lightslider or lightGallery