Responsive jQuery Carousel Slideshow Plugin - Light Carousel

Light Carousel is a lightweight, responsive jQuery carousel/slideshow/gallery plugin that has support including thumbnail navigation, crossfade transition effect, and animated caption bar.

How to use it:

1. Include jQuery library together with the light-carousel.css and jquery.light-carousel.js in your html page.

<link href="light-carousel.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jquery.light-carousel.js"></script>

2. Insert a list of images with the next/prev navigation into the carousel. The plugin will automatically generate captions from image's alt attribute.

<div class="carousel">
  <ul>
    <li> <img src="1.jpg" alt="Description for photo 1"> </li>
    <li> <img src="2.jpg" alt="Description for photo 2"> </li>
    <li> <img src="3.jpg" alt="Description for photo 3"> </li>
    <li> <img src="4.jpg" alt="Description for photo 4"> </li>
  </ul>
  <div class="controls">
    <div class="prev"></div>
    <div class="next"></div>
  </div>
</div>

3. Create a list of thumbnails that allows the visitor to navigate through the large images.

<div class="thumbnails">
  <ul>
    <li> <img src="1.jpg" alt="Description for photo 1"> </li>
    <li> <img src="2.jpg" alt="Description for photo 2"> </li>
    <li> <img src="3.jpg" alt="Description for photo 3"> </li>
    <li> <img src="4.jpg" alt="Description for photo 4"> </li>
  </ul>
</div>

4. Call the plugin on the parent container.

$('.carousel-wrapper').lightCarousel();

5. Default config options.

$('.carousel-wrapper').lightCarousel({

// Interval between transitions
interval: 6000, 

// If set to false, it retains the height of first slide
changeHeight: true, 

// Auto transitons
slideshow: true 

});

---

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