thumbnails-carousel

Simple jquery plugin which add support for using thumbnails for bootsrap carousel.

Dependencies: jQuery & bootstrap.js, include thumbnails.carousel.js after.

While user slide left or right, appropriately thumbnail gets selected and change its opacity to be different among others thumbnails. User can also click on thumbnails to show the appropriate image on carousel.

Options

center: boolean, default: true
backgroundControl: boolean, default: false

With 'center' option set to true thumbnails will be centered under the carousel parent(image above).
With 'backgroundControl' option set to false plugin will turn off any controls background gradients.

Example with center: false and backgroundControl: true.

How to use it

Add jQuery, bootstrap.js, thumbnails.carousel.js and thumbnails.carousel.css

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- All other bootstrap carousel code as usual -->
  ...

  <!-- Add your thumbnails --> 
    <ul class="thumbnails-carousel clearfix">
      <li><img src="https://github.com/srkimir/thumbnails-carousel/raw/master/images/1_tn.jpg" alt="1_tn.jpg"></li>
      <li><img src="https://github.com/srkimir/thumbnails-carousel/raw/master/images/2_tn.jpg" alt="2_tn.jpg"></li>
      <li><img src="https://github.com/srkimir/thumbnails-carousel/raw/master/images/3_tn.jpg" alt="3_tn.jpg"></li>
      <li><img src="https://github.com/srkimir/thumbnails-carousel/raw/master/images/4_tn.jpg" alt="4_tn.jpg"></li>
      ...
    </ul>
</div>

Run plugin:

$('.thumbnails-carousel').thumbnailsCarousel();

Or pass options:

$('.thumbnails-carousel').thumbnailsCarousel({
    center: false,
    backgroundControl: true
});

Or visit: http://codepen.io/srkimir/pen/mGbrf

TODO:

1. The only thing worse than missing alt text is bad alt text. 1_tn.jpg is meaningless. http://webaccess.its.uiowa.edu/workshops/alt/alt006.html