Lightweight Responsive Content Slider Plugin with jQuery and CSS3 - lightslider

lightslider is a lightweight yet fully customizable jQuery slider plugin that supports any Html contents and makes use of CSS3 transitions and transforms to create smooth 'fade' or 'slide' effects. Licence under the Apache License 2.0.

Features:

• Fully responsive - will adapt to any device.
• Touch support for mobile devices.
• Auto play and auto loop to create a content carousel.
• Supports easing effects.
• Gallery mode to create an image slideshow with thumbnails.
• Keyboard, arrows and dots navigation.
• Full callback API and public methods.
• Small file size, fully themed, simple to implement.

Basic Usage:

1. Load the core CSS file in the head section of your page.

<link href="css/lightSlider.css" rel="stylesheet" type="text/css">

2. Load the jQuery library and jQuery lightSlider's javascript file in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.lightSlider.js"></script>

3. Create a simple image gallery using Html unordered list and data-thumb attribute for thumbnails. By default, the plugin will automatically generate a thumbnail bar at the bottom of your image gallery.

<ul id="lightSlider" class="gallery">
<li data-thumb="img/thumb/1.jpg"> <a href="#"> <img src="img/1.jpg" /> </a> </li>
<li data-thumb="img/thumb/2.jpg"> <a href="#"> <img src="img/2.jpg" /> </a> </li>
<li data-thumb="img/thumb/3.jpg"> <a href="#"> <img src="img/3.jpg" /> </a> </li>

...

</ul>

4. Don't forget to reset the default UL LI properties.

<style>
ul, li {
margin: 0;
padding: 0;
list-style: none
}
</style>

5. Call the plugin with some options.

<script type="text/javascript">
$(document).ready(function() {
$('#lightSlider').lightSlider({
gallery:true,
minSlide:1,
maxSlide:1,
auto:true     
});  
});
</script>

6. All the settings.

$(document).ready(function() {
$('#lightSlider').lightSlider({
item: 3,
slideMove: 1,
slideMargin: 10,
addClass: '',

mode:"slide", // Type of transition 'slide' and 'fade'.
useCSS:true, // If true LightSlider will use CSS transitions. if falls jquery animation will be used.
speed: 1000, // Transition duration (in ms). 
cssEasing: 'ease', // 'cubic-bezier(0.25, 0, 0.25, 1)'
easing: 'linear', // The type of "easing". ex: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'cubic-bezier(n,n,n,n)'.
auto: false, // If true, the Slider will automatically start to play.
pause: 3000, // The time (in ms) between each auto transition
loop:true, // If false, will disable the ability to loop back to the beginning of the slide when on the last element.

controls:true, // if controls:false, controls will not be added
prevHtml:'', // custom text for prev control
nextHtml:'', // custom text for next control
rtl: false,
keyPress:true, // Enable keyboard navigation
adaptiveHeight: false,
vertical: false,
verticalHeight: 500,
vThumbWidth: 100,
thumbItem: 10,
galleryMargin: 5,
pager:true, // Enable pager option
gallery:false, // Enable gallery mode
thumbMargin:3, // Spacing between each thumbnails 
currentPagerPosition:'middle', // 'left' OR 'middle', 'right'

enableTouch: true,
enableDrag: true,
freeMove: false,
swipeThreshold:40, // By setting the swipeThreshold you can set how far the user must swipe for the next/prev slide
responsive: [],

onBeforeStart: function($el) {},
onSliderLoad: function($el) {},
onBeforeSlide: function($el,scene) {},
onAfterSlide: function($el,scene) {},
onBeforeNextSlide: function($el,scene) {},
onBeforePrevSlide: function($el,scene) {}
});  
});

7. Public methods.

$(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();
});

About author:

Author: Sachin

Project Home page: http://sachinchoolur.github.io/lightslider/index.html

Change logs:

2016-10-25

• v1.1.6

2015-11-01

• Fixed autoplay issue on tab blur..
• v1.1.5

2015-10-28

• Added destroy method.
• v1.1.4

2015-04-14

• Fixed Image height bug

2015-04-08

• Fixed Thumbnail height problem.

v1.1.2 (2015-04-05)

• Bug fixes and code improvements..

2014-11-05

• Fixed an issue.

2014-10-30

• Fixed height issue with loop

2014-10-26

• Infinite loop.
• Auto width.
• SlideEnd animation.
• Improved swipe support.
• Improved perfomance.

2014-10-02

• Added scene parameter to the callback function

2014-10-01

• Fixed: Vertical slide turn to horizontal in fade mode
• Fixed: with 'mode: "fade"', the previous button is not functioning correctly

2014-09-30

• v1.1.0

2014-09-11

• add pagerPosition. By default bottom, but can choose top

2014-07-25

• Fixed an issue where slider mode 'fade' not working
• Fixed an issue where pager & controls visible even with single slide

2014-06-26

• Fixed issue Mistake in the JS

2014-06-24

• Update lightSlider.css

2014-06-10

• Performance improvements and bug fixes

2014-05-26

• Fixed fade issue on IE9

2014-05-24

• Fixed fade issue on IE 9

2014-04-22

• Fixed issue Slider skips two slides on Touch devices

---

This awesome jQuery plugin is developed by sachinchoolur. For more Advanced Usages, please check the demo page or visit the official website.