JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation
- 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 ...)
You can Install lightslider using the Bower package manager.
$ bower install lightsliderYou can also find lightslider on npm.
$ npm install lightslideradd 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 : [],
onBeforeStart: function (el) {},
onSliderLoad: function (el) {},
onBeforeSlide: function (el) {},
onAfterSlide: function (el) {},
onBeforeNextSlide: function (el) {},
onBeforePrevSlide: function (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