- ×
JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation
Filed under images › sliders and displaysShow AlljQuery lightSlider
Demo
Description
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?
Bower
You can Install lightslider using the Bower package manager.
$ bower install lightslider
npm
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="//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="light-slider"> <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() { $("#light-slider").lightSlider(); }); </script>
Play with settings
<script type="text/javascript"> $(document).ready(function() { $("#light-slider").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, pauseOnHover: 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 = $("#light-slider").lightSlider(); slider.goToSlide(3); slider.goToPrevSlide(); slider.goToNextSlide(); slider.getCurrentSlideCount(); slider.refresh(); slider.play(); slider.pause(); slider.destroy(); }); </script>
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