Submit your widget

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

Created 4 years ago   Views 7680   downloads 1227    Author sachinchoolur
View DemoDownload
25
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="//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
<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>
<script type="text/javascript">
    $(document).ready(function() {
        $("#lightSlider").lightSlider();
    });
</script> 
<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,
            slideEndAnimatoin: 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 : [],
     
            onBeforeStartfunction (el) {},
            onSliderLoadfunction (el) {},
            onBeforeSlidefunction (el) {},
            onAfterSlidefunction (el) {},
            onBeforeNextSlidefunction (el) {},
            onBeforePrevSlidefunction (el) {}
        });
    });
</script> 
<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> 

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