Nesting Penguins Molt


    1.1.6 • Public • Published

    license travis bower npm

    jQuery lightSlider


    JQuery lightSlider demo


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

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

    How to use lightSlider?


    You can Install lightslider using the Bower package manager.

    $ bower install lightslider


    You can also find lightslider on npm.

    $ npm install 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="//"></script>
    <script src="js/lightslider.js"></script>
        // Do not include both lightslider.js and lightslider.min.js

    HTML Structure

    <ul id="light-slider">
            <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>

    Call lightSlider!

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

    Play with settings

    <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,
                pauseOnHover: false,
                loop: false,
                slideEndAnimation: true,
                pause: 2000,
                keyPress: false,
                controls: true,
                prevHtml: '',
                nextHtml: '',
                pager: true,
                gallery: false,
                galleryMargin: 5,
                thumbMargin: 5,
                currentPagerPosition: 'middle',
                swipeThreshold: 40,
                responsive : [],
                onBeforeStart: function (el) {},
                onSliderLoad: function (el) {},
                onBeforeSlide: function (el) {},
                onAfterSlide: function (el) {},
                onBeforeNextSlide: function (el) {},
                onBeforePrevSlide: function (el) {}

    Public methods

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

    Report an Issue

    If you think you might have found a bug or if you have a feature suggestion please use github issue tracker. Also please try to add a jsfiddle that demonstrates your problem

    If you need any help with implementing lightslider in your project or if have you any personal support requests i requset you to please use stackoverflow instead of github issue tracker

    If you like lightSlider support me by staring this repository or tweet about this project. @sachinchoolur

    guidelines for contributors

    MIT © Sachin


    npm i lightslider-rtl

    DownloadsWeekly Downloads






    Last publish


    • bass3l