jQuery Light Slider is a very lightweight (5Kb) responsive image and content slider with lot of options for creating sliders, image galleries, news sliders etc.. It can be used to create beautiful image carousels and news sliders in responsive web pages. Image thumbnail options are also included with the slider.
Features of jQuery Light Slider:
- 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.
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="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>
Call lightSlider!
<script type="text/javascript">
$(document).ready(function() {
$("#lightSlider").lightSlider();
});
</script>
Play with settings
<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>
Public methods
<script type="text/javascript">
$(document).ready(function() {
var slider = $("#lightSlider").lightSlider();
slider.goToSlide(3);
slider.goToPrevSlide();
slider.goToNextSlide();
slider.getCurrentSlideCount();
slider.refresh();
});
</script>