jQuery Light Slider – Lightweight Responsive Content Slider

sponsored

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.

sponsored

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.

light-slider

Download jQuery Light Slider

GitHub Project

Examples

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>

sponsored

Leave a Reply