Bootstrap Carousel with Thumbs and Captioning

So I really love how this Carousel (Carousel Extended by msurguy) works over at Bootsnipp. The bad thing is, the code is outdated. It’s Bootstrap 2.3.2 and we’re at 3.2 now. Plenty of people, however, wanted an updated version. It really was an excellent carousel.

The first thing was to adjust the HTML code. I changed out the span scaffolding for the grid columns.

I included the BS 3 carousel controls with the glyphicons.

<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>

Became

<a class="left carousel-control" href="#myCarousel" data-slide="prev">

</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">

</a>

The next was to simplify the output of the thumbnails and update the responsive utilities.

<div id="slider-thumbs" class="row hidden-phone">
<div class="span12"><!-- Bottom switcher of slider -->
<ul class="thumbnails">
    <li class="span2">```Became
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments