JQuery lightSlider is a lightweight responsive Content slider with carousel thumbnails navigation ( 5KB minified )
- Fully responsive - will adapt to any device.
- Supports touch devices and swiping.
- Gallery mode to create an image slideshow with thumbnails
- Small file size (6kb) (minified), fully themed, simple to implement.
- CSS transitions with jQuery fallback.
- Full callback API and public methods.
- Auto play and auto loop to create a content carousel.
- Keyboard, arrows and dots navigation.
- Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone.
- Slide and Fade Effects.
- Multiple instances on one page.
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({
slideWidth:270,
slideMargin:0,
slideMove:1,
minSlide:1,
maxSlide:8,
pager:true,
controls:true,
prevHtml:'',
nextHtml:'',
keyPress:true,
thumbWidth:50,
thumbMargin:3,
gallery:false,
currentPagerPosition:'middle',
useCSS:true,
auto: false,
pause: 2000,
loop:true,
easing: '',
speed: 1000,
mode:"slide",
swipeThreshold:10,
onBeforeStart: function(){},
onSliderLoad: function() {},
onBefroreSlide:function(){},
onAfterSlide:function(){},
onBeforeNextSlide: function(){},
onBeforePrevSlide: function(){}
});
});
</script><script type="text/javascript">
$(document).ready(function() {
var slider = $("#lightSlider").lightSlider();
slider.goToSlide(3);
slider.goToPrevSlide();
slider.goToNextSlide();
slider.getCurrentSlideCount();
slider.refresh();
});
</script>