"Thumbnail Carousel"
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 class="row"> <div class="span12"> <div class="well"> <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item active"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> </div><!--/row-fluid--> </div><!--/item--> <div class="item"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> </div><!--/row-fluid--> </div><!--/item--> <div class="item"> <div class="row-fluid"> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> <div class="span3"><a href="#x" class="thumbnail"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;" /></a></div> </div><!--/row-fluid--> </div><!--/item--> </div><!--/carousel-inner--> <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> </div><!--/myCarousel--> </div><!--/well--> </div> </div> </div>
/* Removes the default 20px margin and creates some padding space for the indicators and controls */ .carousel { margin-bottom: 0; padding: 0 40px 30px 40px; } /* Reposition the controls slightly */ .carousel-control { left: -12px; } .carousel-control.right { right: -12px; } /* Changes the position of the indicators */ .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the colour of the indicators */ .carousel-indicators li { background: #c0c0c0; } .carousel-indicators .active { background: #333333; }
$(document).ready(function() { $('#myCarousel').carousel({ interval: 10000 }) });

Related: See More


Questions / Comments:

I see that when i have the reference to bootstrap3.0.0, this does not load correctly. If i change this back to 2.3.3, it works perfectly. Is this control supported by Bootstrap 3.0.0? Please advice.

SSKR () - 4 years ago - Reply 0


Right now all snippets on this site are for version 2 only, but in the coming weeks the whole site will be upgraded and these snippets will be updated for version 3 also, please stay tuned and sign up for the email list

maxsurguy () - 4 years ago - Reply 0


Gurpreet singh () - 4 years ago - Reply 0


Gurpreet singh () - 4 years ago - Reply 0


Thanks For tut it nice

Gurpreet singh () - 4 years ago - Reply 0


Mine seems to be displaying as a vertical carousel but still using the width of a horizontal. I have tried to override the bootsrap CSS but it isn't working. Has anyone else had this problem and does anyone have a solution?

Thanks,
Shannon

Shannon () - 4 years ago - Reply 0


where is the plugin of this carousel?

ACie Semilla () - 4 years ago - Reply 0


maxsurguy () - 4 years ago - Reply 0


this is very nice but how can i move one item i mean one product at a time ????

kiran tawde () - 5 years ago - Reply 0


Very nice; thank you ! I was searching for a cool HTML5 component/plugin for Joomla! 3 and, instead, I've use your snippet to write a little piece of php code that do the work. Thanks.

cavo789 () - 5 years ago - Reply 0


Has anyone dynamically reloaded the carousel and thumbnails using jquery? I have it reloading properly (visually looks great), however, when you click on the thumbnails it doesn't change the large photo. My Next and Prev buttons work for the thumbnail pages, but not the thumbnails.

Kelly () - 5 years ago - Reply 0


This Carousel Is Great and What I need For my Page. Nice Work! Guys My indicator show up on the top and it is number not circle, any idea what is the problem of this guys?

Thanks in advance.

Racsh () - 5 years ago - Reply 0


My arrows are showing up as question marks. I assuming this is because of the javascript. I copied all of the code, am I missing something? Thanks!

Mark () - 5 years ago - Reply 0


use < for < and > for > (less than and greater than)

Shannon () - 4 years ago - Reply 0


sorry - it automatically converted.

use & lt ; and & gt ; only with out the spaces :)

Shannon () - 4 years ago - Reply 0


hi;

i want to slide up to down how can change it_

nurkan () - 5 years ago - Reply 0


Hi,

how to change thumbnail number for mobile display. I would like to see just one - not the vertical row of four thumbnails ? Is there an example ?

tnx.

Andrew () - 5 years ago - Reply 0


Solution for mobiles and tablets

<style>
@media (max-width: 767px){
.carousel .row .span3 {
float: left;
width: 25%;
}
}
</style>

bootstraptor () - 5 years ago - Reply 0


Maybe you can use the default Bootstrap carousel in that case...

Or you can still use this one + the default one and apply visible-mobile on the default one and hidden-mobile on this one!

maxsurguy () - 5 years ago - Reply 0


Thank you both, this might work, but only if i could get the carousel jump to next image always by one thumbnail image, not the whole row with 4 images. Any ideas ?

Andrew () - 5 years ago - Reply 0


thanks very much.
How to do auto scroll

Jarnec () - 5 years ago - Reply 0


On small screens when switching to the single column format, one must return to the middle of the carousel to activate the button transition, I suggest using all the lateral.

Rogerio Machado () - 5 years ago - Reply 0


Urm, mine didn't work, The thumbnails load, but the carousel does not work?

Lewiis () - 5 years ago - Reply 0


You have to add the Bootstrap library (CSS and JS) files to your website first and call these files in the same page hosting the carousel slider. Don't forget to call jQuery too, before the Bootstrap JS call. If you are finding it still does not work, then take a close look at your web browser console (WebKit Inspector or Firebug) and see if any errors are being logged. These can give a good clue as to what's gone wrong and how to resolve possible problems.

WillWoodgate () - 5 years ago - Reply 0


i just want to thank you for this cool carousel.

This is what i was searching for, i tried to create one myself, but i don't know javascript.

THX THX THX a lot.

xttrust () - 5 years ago - Reply 0


Thanks!

WillWoodgate () - 5 years ago - Reply 0


You're welcome!

maxsurguy () - 5 years ago - Reply 0