"Carousel Extended"
Bootstrap 2.3.2 Snippet by msurguy

<div class="container"> <div id="main_area"> <!-- Slider --> <div class="row"> <div class="span12" id="slider"> <!-- Top part of the slider --> <div class="row"> <div class="span8" id="carousel-bounding-box"> <div class="carousel slide" id="myCarousel"> <!-- Carousel items --> <div class="carousel-inner"> <div class="active item" data-slide-number="0"> <img src="http://placehold.it/770x300&text=one"></div> <div class="item" data-slide-number="1"> <img src="http://placehold.it/770x300&text=two"></div> <div class="item" data-slide-number="2"> <img src="http://placehold.it/770x300&text=three"></div> <div class="item" data-slide-number="3"> <img src="http://placehold.it/770x300&text=four"></div> <div class="item" data-slide-number="4"> <img src="http://placehold.it/770x300&text=five"></div> <div class="item" data-slide-number="5"> <img src="http://placehold.it/770x300&text=six"></div> </div><!-- Carousel nav --> <a class="carousel-control left" data-slide="prev" href="#myCarousel">‹</a> <a class="carousel-control right" data-slide="next" href="#myCarousel">›</a> </div> </div> <div class="span4" id="carousel-text"></div> <div id="slide-content" style="display: none;"> <div id="slide-content-0"> <h2>Slider One</h2> <p>Lorem Ipsum Dolor</p> <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p> </div> <div id="slide-content-1"> <h2>Slider Two</h2> <p>Lorem Ipsum Dolor</p> <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p> </div> <div id="slide-content-2"> <h2>Slider Three</h2> <p>Lorem Ipsum Dolor</p> <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p> </div> <div id="slide-content-3"> <h2>Slider Four</h2> <p>Lorem Ipsum Dolor</p> <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p> </div> <div id="slide-content-4"> <h2>Slider Five</h2> <p>Lorem Ipsum Dolor</p> <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p> </div> <div id="slide-content-5"> <h2>Slider Six</h2> <p>Lorem Ipsum Dolor</p> <p class="sub-text">October 24 2012 - <a href="#">Read more</a></p> </div> </div> </div> </div> </div><!--/Slider--> <div class="row hidden-phone" id="slider-thumbs"> <div class="span12"> <!-- Bottom switcher of slider --> <ul class="thumbnails"> <li class="span2"> <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a> </li> <li class="span2"> <a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/170x100&text=six"></a> </li> </ul> </div> </div> </div> </div>
jQuery(document).ready(function($) { $('#myCarousel').carousel({ interval: 5000 }); $('#carousel-text').html($('#slide-content-0').html()); //Handles the carousel thumbnails $('[id^=carousel-selector-]').click( function(){ var id_selector = $(this).attr("id"); var id = id_selector.substr(id_selector.length -1); var id = parseInt(id); $('#myCarousel').carousel(id); }); // When the carousel slides, auto update the text $('#myCarousel').on('slid', function (e) { var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-'+id).html()); }); });

Similar snippets: See More


Comments:

Milind 2013-10-24 09:34:53
    This photogallery is fantastic, my question is what happens when we have more than 6 images in gallery, Say suppose if i have 10 images how would the thumbnails behave?
kamalchaneman 2013-10-24 16:51:39
    It won't work if we have more than 9 slider, 10th will slide back to first slide. How to fix this?
Zheness 2013-10-28 20:08:23
    Hi,
if you want add more than 9 pictures, you can easily edit the line 12 in the js file :
Muhammad Amir 2013-11-24 13:22:33
    Thanks its work.
Norvs 2013-11-04 15:33:15
    Does this work on bootstrap 3.0.1 or 2.3.0 and below?
April Sadowski 2014-09-10 13:41:29
    Some slight modifications and it does. Here's the working fork: http://bootsnipp.com/snippe...
Brickyenne 2013-11-06 01:14:13
    Content not working. Using Bootstrap 2.3.2 and jQuery 1.10.2 and using the code as is here but content not showing, only the "Read more" anchor.
Claudio De Siervi 2017-06-25 22:46:31
    Replace the sentence (into script code)
$('#myCarousel').on('slid', function (e) {
by this new one
$('#myCarousel').on('slid.bs.carousel', function (e) {
rahul 2013-11-12 13:08:30
    why the content is not sliding with the slider
Ravi 2013-11-12 18:16:40
    its not working when we click on blow image
Ravi 2013-11-13 03:18:08
    ReferenceError: jQuery is not defined
some error show in console
<script src="http://ajax.googleapis.com/..."></script>
Karan Mamtora 2013-11-28 19:58:07
    <script src="http://ajax.googleapis.com/..."></script>
Jade C 2013-12-04 22:55:52
    I added the code to my page and the row of image did loaded but had a dot next to them. How to i make the row of image load with out the dot?
Gary Cawthra 2013-12-09 11:57:07
    I've got this working as a carousel pulling in some youtube video triggered by the thumbnails. It all works really well, however I can't get the videos to stop playing when a new one is selected. Any ideas how to do this without breaking the rest of it? cheers
sistemasti 2013-12-10 16:30:27
    perfeito!... estou entrando de vez em ASP.MVC e vai me ajudar muito.. fora a qualidade!.
santhu 2013-12-11 17:42:53
    images in slider doesnt slide in Internet explorer 8 broswer , instead of sliding it just replaces image
rinetla 2014-01-12 05:22:35
    Boa noite pessoal!
Clive Stewart 2014-03-02 15:43:10
    Can you update this code so that i works with twitterbootsrap 3.x ?
April Sadowski 2014-09-10 13:40:28
    http://bootsnipp.com/snippe.... I'm made a fork.
damien 2014-05-30 00:05:37
    Would like to be able remove the dots - Bootstrap 3.1
Guest 2014-09-09 19:56:26
    I've forked it (awaiting submission approval). See http://www.bootply.com/zaKt... for active example.
April Sadowski 2014-09-10 13:40:50
    http://bootsnipp.com/snippe... I've forked it.
PyMba86 2014-06-07 13:11:08
    And working in 3.0
$('#myCarousel').on('slid.bs.carousel', function () {
Claudio De Siervi 2017-06-25 22:43:36
    It helps to migrate to 3.X. Thanx
Cihan Balcı 2014-07-14 17:31:37
    Doesn't work on 3.0.
April Sadowski 2014-09-10 13:41:04
    Working 3.2 version: http://bootsnipp.com/snippe...
niv 2014-07-24 16:05:45
    Browser back button issue: If you click on any of the content LINKS [ie "Read more" in ex] that correspond to the slide shown, then after viewing that file and clicking browser back button, you return to the START of the carousel rather than to the slide you were viewing when you clicked the file link. This is fine for the FIRST slide since back button alwasy returns you to first slide but not ok if you were on slide 2+. I understand it's because the carousel page URL doesn't change but how can I fix this so that if you click on content file link in say, slide 3, you can view the file, and the browser back button returns you to slide 3 [rather than slide 1]?
Eli 2014-08-28 05:33:33
    what is carousel extended CSS code? in above there isnot css code and my carousel does not display correctly
JC Fernández 2017-02-08 03:26:24
    :(
Zaheer Abbas 2015-01-25 13:15:45
    How to add navigation controls in bootstrap carousel small thumbnails ????
Nuno Sarmento 2015-08-24 11:43:01
    Is there any way to have the carousel nav on left side (vertical )
siod 2015-12-02 17:30:32
    hi
Krissy 2016-02-10 05:49:16
    When utilizing this script, is there a way to have the thumbnails actually display an 'active' class while the main carousel is sliding? Also, is there a way to go directly to a specific carousel item when linking from another page.
JC Fernández 2017-02-08 03:11:59
    Where is CSS, why are they bad? OH MY GOOD!

Commenting will be back soon.