"Article carousel with images indicators"
Bootstrap 3.0.0 Snippet by Mohamed Tahhan

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/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="carousel slide article-slide" id="article-photo-carousel"> <!-- Wrapper for slides --> <div class="carousel-inner cont-slider"> <div class="item active"> <img alt="" title="" src="http://placehold.it/600x400"> </div> <div class="item"> <img alt="" title="" src="http://placehold.it/600x400"> </div> <div class="item"> <img alt="" title="" src="http://placehold.it/600x400"> </div> <div class="item"> <img alt="" title="" src="http://placehold.it/600x400"> </div> </div> <!-- Indicators --> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#article-photo-carousel"> <img alt="" src="http://placehold.it/250x180"> </li> <li class="" data-slide-to="1" data-target="#article-photo-carousel"> <img alt="" src="http://placehold.it/250x180"> </li> <li class="" data-slide-to="2" data-target="#article-photo-carousel"> <img alt="" src="http://placehold.it/250x180"> </li> <li class="" data-slide-to="3" data-target="#article-photo-carousel"> <img alt="" src="http://placehold.it/250x180"> </li> </ol> </div>
/* Main carousel style */ .carousel { width: 600px; } /* Indicators list style */ .article-slide .carousel-indicators { bottom: 0; left: 0; margin-left: 5px; width: 100%; } /* Indicators list style */ .article-slide .carousel-indicators li { border: medium none; border-radius: 0; float: left; height: 54px; margin-bottom: 5px; margin-left: 0; margin-right: 5px !important; margin-top: 0; width: 100px; } /* Indicators images style */ .article-slide .carousel-indicators img { border: 2px solid #FFFFFF; float: left; height: 54px; left: 0; width: 100px; } /* Indicators active image style */ .article-slide .carousel-indicators .active img { border: 2px solid #428BCA; opacity: 0.7; }
// Stop carousel $('.carousel').carousel({ interval: false });

Related: See More


Questions / Comments:

Hi, how can I make the indicators vertical of the right side of the picture (Sorry for my english). Thanks.

lamerov () - 9 years ago - Reply 0


change the 600px width to 100% on .carousel to be responsive

Victor () - 9 years ago - Reply 0


Has anyone made this one responsive yet? I need help please!!! thanks

XK () - 9 years ago - Reply 0


Automatic?

Tom () - 9 years ago - Reply 0


I want to center my indicators but they refuse. Tried margin: 0 auto and the center-block class. Also I have invisible indicators beside my thumbnail indicators. Really weird.

Lauren () - 9 years ago - Reply 0


can u help me i want the imgs indicators on the right of carousel

Ydv-web () - 9 years ago - Reply 0


Hi, I'm placing 2 of this galleries en in the same page but only works the slide in one, what can I do?

Ceci () - 9 years ago - Reply 0


The IDs should be different in both carousels. Make sure that if you have "article-photo-carousel" in one carousel (id="article-photo-carousel" and data-target="#article-photo-carousel"), you should have different ID in the other carousel, for example "article-photo-carousel2" . Let me know if you need more explanation

maxsurguy () - 9 years ago - Reply 0


hi, thank you it really work with the ID's ... but my 2nd gallery disappears when finishes the cycle. what should I do? by the final png looks like it jump and disappears.

Ceci Leon () - 9 years ago - Reply 0


Hi, I am unable to change the width of the main image. can you provide me as which exact class needs the updating. I want to change this 600 width to 90% of the complete width of page. also, is this particular css conflicting with the original bootstrap.css ?

sriya11 () - 10 years ago - Reply 0


How would I get this to work with WordPress?

Julius () - 10 years ago - Reply 0


does your Wordpress theme use Wordpress?

maxsurguy () - 10 years ago - Reply 0


Yeah it does, I just couldn't figure out how to insert the HTML so that it become dynamic. I have found a plugin that has done the rotator in the header, but would like to know how to do it. Thanks!

Julius () - 10 years ago - Reply 0


what exactly do you want to know? which plugin are you using?

maxsurguy () - 10 years ago - Reply 0


Olá amigos, como faço para inserir indicadores para colocar mais miniaturas? Grato

rodrigobahia () - 10 years ago - Reply 0


Sorry , I can't understand you And google translate it in bad way :)

Mohamed Tahhan () - 10 years ago - Reply 0


Hi mtahhan, i want to insert more pictures in this example, it is possible? More thumbnails with indicators next and previous... More or less some 20 pictures and thumbnails...
It is possible? Can you help me?

Thanks

rodrigobahia () - 10 years ago - Reply 0


Hi , Yes you can add unlimited photo to this carousel , just you want to small the thumbnails to good view or make indicators under the big photo section , That is all :)

Mohamed Tahhan () - 10 years ago - Reply 0


Hi, how can I make the indicators under the big photo? Thanks.

lamerov () - 9 years ago - Reply 0


Hi , you just need add "position : relative" to .carousel-indicators class , have a fun :)

Mohamed Tahhan () - 9 years ago - Reply 0


Thanks again :)

lamerov () - 9 years ago - Reply 0


This is not responsive?

Nino Frenn () - 10 years ago - Reply 0


It is easy to make it responsive , if you can't i can help you

Mohamed Tahhan () - 10 years ago - Reply 0


can u tell me how u make it responsive please? i tried to put in a container and in col-lg-12 but it didnt work
thanks in advance

Rawanda Philip () - 10 years ago - Reply 0


Of course you need just add class to photo "img-responsive" this class from bootstrap if you don't use it you can't use this class you should make it in your self
Any way if you want any help I'm ready

Mohamed Tahhan () - 10 years ago - Reply 0


Thanks a lot mtahhan , it worked for me but actually i used the img-responsive class with the carousel not with the image. again thanks for your help, you solved my problem

Rawanda Philip () - 10 years ago - Reply 0


You r welcome Rawanda , if you have any other problem in css or bootstrap Plz send to me I can help you

Mohamed Tahhan () - 10 years ago - Reply 0


Can you make it responsive? I challenge you... :)

Ryan Harmon () - 10 years ago - Reply 0


Easy :)

Nino Frenn () - 10 years ago - Reply 0


:) Well are you going to?

Ryan Harmon () - 10 years ago - Reply 0