Lightweight Responsive Carousel Slider Plugin - jQuery lightSlider

The jQuery lightSlider plugin makes it easier to create a fast, responsive, cross-browser carousel slider from any html content (images, text, mixed content, etc).

Features:

• Autoplay.
• Pause auto rotation on hover.
• Infinite loop.
• Custom navigation arrows.
• Custom pagination bullets.
• Configurable duration of animation.

How to use it:

1. Link to jQuery library and the jQuery lightSlider plugin's files as follows:

<link rel="stylesheet" href="css/lightslider.css">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.lightslider.min.js"></script>

2. Create a list of html contents to be presented in the carousel slider.

<ul class="slider">
  <li>
    <a href="#"><img src="1.jpg" alt="One"></a>
    <div class="caption">
      <p>Description 1</p>
    </div>
  </li>
  <li>
    <a href="#"><img src="2.jpg" alt="Two"></a>
    <div class="caption">
      <p>Description 2</p>
    </div>
  </li>
  <li>
    <a href="#"><img src="3.jpg" alt="Three"></a>
    <div class="caption">
      <p>Description 3</p>
    </div>
  </li>
  <li>
    <a href="#"><img src="4.jpg" alt="Four"></a>
    <div class="caption">
      <p>Description 4</p>
    </div>
  </li>
  ...
</ul>

3. Initialize the carousel slider with default options.

$(document).ready(function() {
  $('ul.slider').lightSlider();
});

4. Config the carousel slider by overriding the default options and passing them to the lightSlider() method.

$(document).ready(function() {

  $('ul.slider').lightSlider({

    // auto play
    'auto': true,

    // shows navigation arrows
    'arrowsNavigation': true,

    // shows pagination bullets
    'bullets': true,

    // infinite loop
    'loop': true,

    // duration of animation
    'slideDuration': 500,

    // delay
    'pause': 4000,

  });
});

---

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