"Carousel Extended"
Bootstrap 2.3.2 Snippet by msurguy

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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()); }); });

Related: See More


Questions / Comments:

Where is CSS, why are they bad? OH MY GOOD!

JC Fernández () - 1 year ago - Reply 0


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.

IE: index.php links shops.php#carousel-3 where #3 is displayed on the carousel with the #3 thumbnail selected.

Thanks in advance.

Krissy () - 2 years ago - Reply 0


hi

how can i change the right and left carousel-control image to another image of my choice?

</div>


</div>

thanks

siod () - 2 years ago - Reply 0


Is there any way to have the carousel nav on left side (vertical )

Nuno Sarmento () - 3 years ago - Reply 0


How to add navigation controls in bootstrap carousel small thumbnails ????

Zaheer Abbas () - 3 years ago - Reply 0


what is carousel extended CSS code? in above there isnot css code and my carousel does not display correctly

Eli () - 4 years ago - Reply 0


:(

JC Fernández () - 1 year ago - Reply 0


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]?

niv () - 4 years ago - Reply 0


Doesn't work on 3.0.

Cihan Balcı () - 4 years ago - Reply 0


Working 3.2 version: http://bootsnipp.com/snippe...

April Sadowski () - 4 years ago - Reply 0


And working in 3.0
$('#myCarousel').on('slid.bs.carousel', function () {

PyMba86 () - 4 years ago - Reply 0


It helps to migrate to 3.X. Thanx

Claudio De Siervi () - 1 year ago - Reply 0


Would like to be able remove the dots - Bootstrap 3.1

damien () - 4 years ago - Reply 0


April Sadowski () - 4 years ago - Reply 0


I've forked it (awaiting submission approval). See http://www.bootply.com/zaKt... for active example.

Guest () - 4 years ago - Reply 0


Can you update this code so that i works with twitterbootsrap 3.x ?

Clive Stewart () - 4 years ago - Reply 0


April Sadowski () - 4 years ago - Reply 0


Boa noite pessoal!

Gostaria de saber se tem como para por alguns minutos em um item do carousel e depois continuar a sequencia normal?
Na verdade eu gostaria de no meio dos itens colocar um vídeo e quando chegasse nele o carousel parasse, executasse o vídeo e quando terminasse continuasse a sequencia normal.

rinetla () - 4 years ago - Reply 0


images in slider doesnt slide in Internet explorer 8 broswer , instead of sliding it just replaces image

santhu () - 4 years ago - Reply 0


perfeito!... estou entrando de vez em ASP.MVC e vai me ajudar muito.. fora a qualidade!.

sistemasti () - 4 years ago - Reply 0


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

Gary Cawthra () - 4 years ago - Reply 0


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?

Jade C () - 4 years ago - Reply 0


<script src="http://ajax.googleapis.com/..."></script>

<script src="js/bootstrap.js"></script>

Both added but data content not displaying

Karan Mamtora () - 4 years ago - Reply 0


its not working when we click on blow image

Ravi () - 4 years ago - Reply 0


ReferenceError: jQuery is not defined
some error show in console
<script src="http://ajax.googleapis.com/..."></script>

<script src="js/bootstrap.js"></script>

Ravi () - 4 years ago - Reply 0


why the content is not sliding with the slider

rahul () - 4 years ago - Reply 0


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.

Your help will be appreciated!

Brickyenne () - 4 years ago - Reply 0


Replace the sentence (into script code)
$('#myCarousel').on('slid', function (e) {
by this new one
$('#myCarousel').on('slid.bs.carousel', function (e) {

It works for me under jquery-1.12.4.min.js + Bootstrap v3.3.4.
I hope it help you.

Claudio De Siervi () - 1 year ago - Reply 0


Does this work on bootstrap 3.0.1 or 2.3.0 and below?

Norvs () - 4 years ago - Reply 0


Some slight modifications and it does. Here's the working fork: http://bootsnipp.com/snippe...

April Sadowski () - 4 years ago - Reply 0


Hi,
if you want add more than 9 pictures, you can easily edit the line 12 in the js file :

var id = id_selector.substr(id_selector.length -1); // Old

var id = id_selector.replace('carousel-selector-',''); // New

It's the more simple I have found.

Bye ;)

(I apologize for my english)

Zheness () - 4 years ago - Reply 0


Thanks its work.

Muhammad Amir () - 4 years ago - Reply 0


It won't work if we have more than 9 slider, 10th will slide back to first slide. How to fix this?

kamalchaneman () - 4 years ago - Reply 0


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?

Milind () - 4 years ago - Reply 0


how can i put a caption text or rather the content text how can i edit it coz there is no content text in my bootstrap CSS can someone help me i just newbie using the bootstrap itself

Jhomz Castillo () - 5 years ago - Reply 0


Some click are not work, and my number selector are sort by random.. Is that make problem?

Nino () - 5 years ago - Reply 0


Hi guys, great snippet!!!

I have a question. I don't understand why the image in the thumbnails show after the tag...

Someone has already happened? Thanks..

Giordy () - 5 years ago - Reply 0


Does that work with the newest bootstrap version? I cant get it working with the newest, older ones are ok.

Daniel Brunner () - 5 years ago - Reply 0


Nice work ;)

Gabriel Ovidiu Tihoniuc () - 5 years ago - Reply 0


I have a question, ¿how can I put more than 6 items in the thumbnail section preserving their size (span2 aka col-lg-2)?, it would mean to have a scroll bar in the bottom to access the other thumbnails.

--
Thanks for the great snippet!

jmp () - 5 years ago - Reply 0


Fantastic Carousel & it works great. However, I was trying to place this "Extended Carousel" and the "Thumbnail Carousel" from William Woodgate as two separate carousels on same html page and noticed that when you click on the thumbnails here, it doesn't update the text area no more. It looks like it breaks this "Extended Carousel".
How do I modify the JavaScript to allow both carousels to work on same page please? (Also I have renamed both carousel id's to different names.)
I tried to narrow it down and I think the issue is that I have TWO (.item.active) in same page? I do not know JavaScript but I think the issue lies:

// 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());
});

AZU AZU () - 5 years ago - Reply 0


Lovely snipp. Just what I can use for the "featured" section of my site.

Ethan Ryder () - 5 years ago - Reply 0


absolutely fantastic, thanks fot the sharing. cheers!!! :)

zambranoher () - 5 years ago - Reply 0


How can I highlight the active thumbnail? or how can give a class for the active thumbnail? Please Help!!

christina () - 5 years ago - Reply 0


how to make the active thumbnail highlighted? Or how can I add a class to the active thumbnail? Please help!

christina () - 5 years ago - Reply 0


Has anyone used a carousel and allow users to add "tags" similar to facebook on individual images.

Kelly () - 5 years ago - Reply 0


This is really nice. Thank you!

Mila () - 5 years ago - Reply 0


Nice!!

heyyyyy () - 5 years ago - Reply 0


Great snippet! Wondering if you've ever gotten it working with embedded video though...

I'm embedding vimeo videos and need the slider to pause when a video is being played (and stop the video again once the user has chosen to switch to a new slide)

Any insight on this is appreciated! Thanks again!

discious () - 5 years ago - Reply 0


Clicking on thumbnails and text isn't appearing.

Script order

<script src="js/bootstrap.js"></script>

<script src="js/bootstrap.js"></script>

<script src="js/bootstrap-carousel.js"></script>

Please help.

Raghav () - 5 years ago - Reply 0


I'm trying to figure out how to make it load content dynamically from a rss feed. Possible? Thanks for this, pretty cool.

jil () - 5 years ago - Reply 0


thx from china

li () - 5 years ago - Reply 0


I have a problem. The left and right arrow doesn't work. Can anybody help? It seems that those are not links.

Bob () - 5 years ago - Reply 0


Very good snippet, but I am wondering whether the thumbnails have their own left and right arrow, and could scroll just like most other slider jquery...

since i have about 30 images....

Ding Arne () - 5 years ago - Reply 0


Just wondering if you ever managed to get the thumbnails to scroll also? I have the same problem with it.

Joe Lethbridge () - 5 years ago - Reply 0


you could put the thumbnails in a different carousel.

Jhoanna Isla () - 5 years ago - Reply 0


Please help! I know ZERO javascript and I'm pretty sure that's the issue for me. I've got everything pasted into my code, correct hierarchy for the script but the functionality still isn't working. There's no response to clicking the carousel or thumbnails. Can anyone explain what I need to do; I'd really like to use this! www.jannahill.com/bluemarli...

janna () - 5 years ago - Reply 0


It works in Chrome... what browser are you using?

maxsurguy () - 5 years ago - Reply 0


Thank you for this snippet, looks great!

The only point that can be improved in my opinion is the use of "row-fluid" instead of "row for the parent div.

By doing that, the content is more flexible and it won't affect the structure of the snippet.

Quantesys Mobile () - 5 years ago - Reply 0


How can I make this work if I have the thumbnails in one page and the slider in a separate page?

Christian.C () - 5 years ago - Reply 0


how can i change tat left right button pic =X
it look no good at all,somebody help me pls >.<

JwTan () - 5 years ago - Reply 0


Had it working for a second (the controls/automatic image switching/text), then it stopped. Don't know what I did. I don't know where to put the jQuery Carousel script, put it in front of the default bootstrap scripts, still didn't work. The carousel comes up but the controls etc dont work.

Guest () - 5 years ago - Reply 0


JS files must load in this order, jQuery, bootstrap.js (including the carousel code), script above.

James W Burke () - 5 years ago - Reply 0


Had to replace the ‹ and › with lsaquo; and rsaquo; (put a & in front)

Craig Vanderlinden () - 5 years ago - Reply 0


how to bring the same mouse over effect for the thumbnails when they are active ?

Aasha () - 5 years ago - Reply 0


Everything works perfectly, but one thing: The text next to the header image doesnt appear (ie. "Slider 1, Slider 2" and the "Read More" part). Help please ;3

Scorchstar () - 5 years ago - Reply 0


Never mind :3 consider it fixed. The jquery script needs to be in front of the default bootstrap scripts for it to work.

Scorchstar () - 5 years ago - Reply 0


ran into an issue in firefox where the 8th button gives you the 1st slide
http://stackoverflow.com/qu...

Sy Bernot () - 5 years ago - Reply 0


.carousel-inner > .item > img {
display: block;
line-height: 1;
margin:auto; /* add this for center image*/
}

Radu () - 5 years ago - Reply 0


nice work, i need it to have a carousel ability on the thumbnails also, how can i achieve this?

disqus_7amLCVEcPV () - 5 years ago - Reply 0


Hi there, bit of a long shot but did you ever figure out how to get the thumbnails to scroll also?

Joe Lethbridge () - 5 years ago - Reply 0


simple, elegant and very nice!

Sasa V. Rakovic () - 5 years ago - Reply 0


Is that possible to change the transition from Slide to Fade?

i am karna () - 5 years ago - Reply 0


http://stackoverflow.com/qu...

Just add this CSS, should work.

James W Burke () - 5 years ago - Reply 0


This snippet just works for 10 photos, but if you put:

var id = id_selector.substr(id_selector.lastIndexOf("-")+1);

instead of:

var id = id_selector.substr(id_selector.length -1);

You can have as many photos you want.

Thanks for this great snippet!

(and sorry for my bad English)

solemoris () - 5 years ago - Reply 0


I would like to use it in a bootstrap project, but I can't find the css files. Can you put those up as well, please?

whage () - 5 years ago - Reply 0


Which CSS files? you can get bootstrap at getbootstrap.com

maxsurguy () - 5 years ago - Reply 0


There must be some custom css in there, a lot of IDs and such. Simply adding this html to my code without any additional css just doesn't work.

whage () - 5 years ago - Reply 0


No, there isn't CSS involved. The ID's are all referenced via JavaScript.

James W Burke () - 5 years ago - Reply 0


Very Nice! But I'm having two problem: click on thumbnail doesn't works and the text on the right column doesn't appear. Is there anyone who can help me?

diego () - 5 years ago - Reply 0


I have the same problem and it is still not resolved

M1L05Z () - 5 years ago - Reply 0


This is a JavaScript issue. Your script either isn't loading, or isn't at the bottom of the page (or bootstrap.js isn't loading with the carousel).

James W Burke () - 5 years ago - Reply 0


Make sure you are referencing the id of the section when you append the text...
$('#slide-content').append(text_items);

The other selectors are classes.

Gareth Patterson () - 5 years ago - Reply 0


Make sure you have your jquery and bootstrap .js files
( i.e. <script src="js/jquery-latest.js"></script> and <script src="js/bootstrap.js"></script>)
before the carousel script. Cheers.

James Stephaniuk () - 5 years ago - Reply 0


same issue here :(

nagash () - 5 years ago - Reply 0


Nice!

Андрей Макаров () - 5 years ago - Reply 0


Nice one. Keep it up

masudiiuc () - 5 years ago - Reply 0


hover on thumbs would be nice, too! ;-)

youngstar7 () - 5 years ago - Reply 0


Could you elaborate on what you mean by this?

James W Burke () - 5 years ago - Reply 0


i'm sorry... i mean showing images on 'hovering' a thumbnail ;-)

youngstar7 () - 5 years ago - Reply 0


If you change the .click() to a .hover() in the JavaScript you can easily achieve this.

James W Burke () - 5 years ago - Reply 0


How can I highlight the active thumbnail? or how can give a class for the active thumbnail? Please Help!!

christina () - 5 years ago - Reply 0


I'm interested in this too - has anyone figured it out?

blorriman () - 5 years ago - Reply 0


use css, that's more easy

Nino () - 5 years ago - Reply 0