Bootstrap Carousel with Thumbnail Strip

Shows how to change the indicators in the Bootstrap carousel to be image based instead of the normal dots.

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css">
<script src="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script>
<p>Below is the carousel example copied from the Bootstrap documentation.</p>

<div id='carousel-example-generic' class='carousel slide' data-ride='carousel'>
    <!-- Indicators -->
    <ol class='carousel-indicators'>
        <li data-target='#carousel-example-generic' data-slide-to='0' class='active'></li>
        <li data-target='#carousel-example-generic' data-slide-to='1'></li>
        <li data-target='#carousel-example-generic' data-slide-to='2'></li>
    </ol>
    
    <!-- Wrapper for slides -->
    <div class='carousel-inner'>
        <div class='item active'>
            <img src='http://placehold.it/400x200&text=slide1' alt='' />
        </div>
        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide2' alt='' />
        </div>
        <div class='item'>
            <img src='http://placehold.it/400x200&text=slide3' alt='' />
        </div>
    </div>
        
    <!-- Controls -->
    <a class='left carousel-control' href='#carousel-example-generic' data-slide='prev'>
        <span class='glyphicon glyphicon-chevron-left'></span>
    </a>
    <a class='right carousel-control' href='#carousel-example-generic' data-slide='next'>
        <span class='glyphicon glyphicon-chevron-right'></span>
    </a>
</div>

<p>Below is an altered example that shows the indicators as thumbnails in a scrollable strip. This was accomplished with two markup changes and some CSS changes.</p>

<div id='carousel-custom' class='carousel slide' data-ride='carousel'>
    <div...

CSS

h4 {
    margin: 20px 10px 10px;
}
p {
    margin: 10px;
}

#carousel-example-generic {
    margin: 20px auto;
    width: 400px;
}

#carousel-custom {
    margin: 20px auto;
    width: 400px;
}
#carousel-custom .carousel-indicators {
    margin: 10px 0 0;
    overflow: auto;
    position: static;
    text-align: left;
    white-space: nowrap;
    width: 100%;
}
#carousel-custom .carousel-indicators li {
    background-color: transparent;
    -webkit-border-radius: 0;
    border-radius: 0;
    display: inline-block;
    height: auto;
    margin: 0 !important;
    width: auto;
}
#carousel-custom .carousel-indicators li img {
    display: block;
    opacity: 0.5;
}
#carousel-custom .carousel-indicators li.active img {
    opacity: 1;
}
#carousel-custom .carousel-indicators li:hover img {
    opacity: 0.75;
}
#carousel-custom .carousel-outer {
    position: relative;
}

JavaScript

$(document).ready(function() {
    $(".mCustomScrollbar").mCustomScrollbar({axis:"x"});
});