"Carousel Extended - 3.2.0 Compatible"
Bootstrap 3.2.0 Snippet by aibrean

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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="container"> <div id="main_area"> <!-- Slider --> <div class="row"> <div class="col-xs-12" id="slider"> <!-- Top part of the slider --> <div class="row"> <div class="col-sm-8" 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="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> <div class="col-sm-4" 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 2014 - <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 2014 - <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 2014 - <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 2014 - <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 2014 - <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 2014 - <a href="#">Read more</a></p> </div> </div> </div> </div> </div><!--/Slider--> <div class="row hidden-xs" id="slider-thumbs"> <!-- Bottom switcher of slider --> <ul class="hide-bullets"> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-0"><img src="http://placehold.it/170x100&text=one"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/170x100&text=two"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/170x100&text=three"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/170x100&text=four"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/170x100&text=five"></a> </li> <li class="col-sm-2"> <a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/170x100&text=six"></a> </li> </ul> </div> </div> </div>
.hide-bullets { list-style:none; margin-left: -40px; margin-top:20px; }
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 = this.id.substr(this.id.lastIndexOf("-") + 1); var id = parseInt(id); $('#myCarousel').carousel(id); }); // When the carousel slides, auto update the text $('#myCarousel').on('slid.bs.carousel', function (e) { var id = $('.item.active').data('slide-number'); $('#carousel-text').html($('#slide-content-'+id).html()); }); });

Related: See More


Questions / Comments:

I was wondering if there is a way to highlight the thumbnail of the active image in the carousel? Thanks!

CCSA-CCDUS (0) - 3 months ago - Reply 0


Can we make a slide carousel with infinite image? THANK YOU

Création-sites Webcreation (0) - 9 months ago - Reply 0


Hello, will anyone have found how to scroll the bottom images in a carousel to have as much as you want and that this is more esthetic?

elodie gaborit (0) - 9 months ago - Reply 0


Hello.
How to make an active preview?

Sergey Zhelanov (0) - 11 months ago - Reply 0


How to make the active previews be highlighted? Add Active Class?

Sergey Zhelanov (0) - 1 year ago - Reply 0


Awesome brothrt!!
all script is working but not moving text with thumbnail images.please guide me how can i solve this issue ?

Muhammad iqbal (0) - 1 year ago - Reply 0


HERE IS THE FIX FOR CHANGING TEXT ON CLICK AND ON SLIDE!
<script>
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
var id = 0;
$('#carousel-text').html($('#slide-content-' + id).html());
$('[id^=carousel-selector-]').click( function(){
id = this.id.substring(this.id.lastIndexOf('-'));
id = parseInt(id.replace('-',''));
$('#myCarousel').carousel(id);
});
$('#myCarousel').on('slid.bs.carousel', function (e) {
id = $('#myCarousel .active').index('#myCarousel .item');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
</script>

Max (0) - 1 year ago - Reply 0


Thank you, you helped me a lot

Jonathan Gregorio Rodriguez To (0) - 10 months ago - Reply 0


Hi Im just wondering if this can be applied in AngularJs.
This Feature is really fit for my project but mine is on Angular.

Bryan Reas (0) - 1 year ago - Reply 0


im having a problem plz someone help
http://stackoverflow.com/qu...

James Allan (0) - 1 year ago - Reply 0


i have multiply carousel on the same page and tried giving unique ids but only the slider moves and updates. The thumbnail and text doesnt. can anyone give me an example for the second carousel on the same page ?

karan balaji (0) - 1 year ago - Reply 0


did u fix your problem?
im having issue with the thumbs too
im using dynamically with php

James Allan (0) - 1 year ago - Reply 0


whenever i click on any of the next/prev button for the first time , it

slide the screen a bit upwards ??? why is that so ? Please help

Azhar Uddin (0) - 2 years ago - Reply 0


Is great and I like it, but how can I give a style to the active thumb?

RBNZ (0) - 2 years ago - Reply 0


Is it possible to get the line with thumbnails like a carousel? And when scrolling the main picture to highlight the thumbnail in any way?

Lars (0) - 3 years ago - Reply 0


Great work, I'm struggling to alter it to my own needs though.

How would you go about making the thumbnails highlight the active slide and change with the large one?

Dave (0) - 3 years ago - Reply 0


For me, the text 'slider one', 'slider two' etc doesn't appear . I have the layout and functionality working just like the demo and the area the text goes in is there but just no text. My code states the text should be there so any idea?

John (0) - 3 years ago - Reply 0


Sorted, me being silly. I had the rang JS in!

John (0) - 3 years ago - Reply 0


Just to make it clear as I was a bit confused and had the same issue as Aaron. When clicking the thumbnails on this demo, the main image doesn't change but it should. To fix that, just add this JS:

$('[id^=carousel-selector-]').click( function(){
var id = this.id.substr(this.id.lastIndexOf("-") + 1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});

My question now - For me everything works great but the text on the right hand side (Slide One, Slide Two etc.) doesn't display for me at all. It would be handy for me as I want a main image with a bit of accompanied text so this layout is perfect. Anyone know why that text isn't visible?

John (0) - 3 years ago - Reply 0


Great work! But I have a problem. When I click on any thumbnail doesn't change the slide. Why? In your example it does the same.

Aarón (0) - 3 years ago - Reply 0


I have the same issue

Free (0) - 3 years ago - Reply 0


The code preview above is in the iframe, so you may go by that url and view page source to save it in your own html page. Then I just used local copies of jquery 1.11.3 and bootstrap 3.3.5. Thumbnails will stop working if js script definitions moved to the end of the HTML's body.

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Gennady (0) - 2 years ago - Reply 0


Great stuff.

What if I have multiple carousels on the same page, one normal and one extended. I have this problem where the carousel is sliding the items but the content is not changing. There is a conflict between the two carousels but I can't find it. I gave them different id but that didn't solved it.
Anyone?

tommy (0) - 3 years ago - Reply 0


I found that you have to specify down through the id and classes

// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {

var id = $('#myCarousel .carousel-inner .item.active').data('slide-number');

$('#carousel-text').html($('#slide-content-'+id).html());
});

Notice I added #myCarousel and .carousel-inner

Ser Osis (0) - 2 years ago - Reply 0


Thank you, you helped me a lot.

Jonathan Gregorio Rodriguez To (0) - 10 months ago - Reply 0


Thank you Ser Osis!!

Joel Diaz (0) - 1 year ago - Reply 0


Could you please create a snippet and post the link to it here?

maxsurguy (0) - 3 years ago - Reply 0


It not works with Bootstrap 3.3.1?

Raquel (0) - 3 years ago - Reply 0


It not works with bootstrap 3.3.1?

Raquel (0) - 3 years ago - Reply 0


how to change the width of carousel ?

Someone (0) - 3 years ago - Reply 0


It's based on the width of your container. The grid structure in Bootstrap governs the parent carousel container (see col-sm-8 on the ID of carousel-bounding-box).

April Sadowski (0) - 3 years ago - Reply 0


what size of image in pixel?

Wagner Nogueira (0) - 3 years ago - Reply 0


check image carousel here http://www.mirchu.net/rook-...

Mirchu (0) - 3 years ago - Reply 0


How to resize the pictures as well as the whole carousel structure?

vonBrown (0) - 3 years ago - Reply 0


Use the Bootstrap grid system to change widths.

April Sadowski (0) - 3 years ago - Reply 0


Thanks a lot for the slider, great work

Alex de Graaff (0) - 3 years ago - Reply 0


Thanks for the great work. I have a question. What if I want to use multiple of carousel, which part of the js file should I edit it? I tried for hours but still not working well.

Guest (0) - 3 years ago - Reply 0


The ID's would all have to be unique.

April Sadowski (0) - 3 years ago - Reply 0


great job.. thanks for sharing with us.. ;)

Miguel Machado (0) - 3 years ago - Reply 0


If you choose to remove the .hidden-xs on the thumbnail, will they work properly on small screens? As in, will they change the big picture when pressed? I've tried a similar slider just reasently which the thumbs was .hidden-xs and .hidden-sm and they work fine in sm but not in xs.

Sanna (0) - 3 years ago - Reply 0


Yes. You would just have to modify output because by default, Bootstrap image grids are stacked vertically in XS. Rather ugly :)

April Sadowski (0) - 3 years ago - Reply 0


Got a problem. When I made 5 slides, slider is disappearing after last slide, instead of listing to the 1st slide. What I've made wrong?

Vladimir Zubkov (0) - 3 years ago - Reply 0


Please post into a fiddle/bootply so I can check it out.

April Sadowski (0) - 3 years ago - Reply 0


Awesome, thanks for sharing your work with us

TavoQiqe (0) - 3 years ago - Reply 0


Awesome work, small bug, once I go over 9 slide, i.e 10, the active slide becomes the first one. instead of the 10th one.

Garen Meserlian (0) - 3 years ago - Reply 0


having this same problem!

craig (0) - 3 years ago - Reply 0


If you could post into a fiddle/bootply, I can check it out.

April Sadowski (0) - 3 years ago - Reply 0


Also I think id_selector should be renamed to selectorId otherwise I'm seeing errors in console and the snippet doesn't work properly

maxsurguy (0) - 3 years ago - Reply 0


I've found the issue he's talking about. It is in JS at the following line:

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

What it does - it takes ONLY one last symbol from "carousel-selector-XXX" and used it as slide number. But it works only within range from 0 to 9. Now imagine that you have 16 slides. If user click on slide, let say, number 12 - then JS returns "2" instead of "12".

I'm not so good in JS, but was able to write following:

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

Now script use part of the string as ID after last "-" symbol.

If you or someone else will be able to refine that script - it will be good. Otherwise please update snippet to save some time for someone.

Sergey Chanaev (0) - 3 years ago - Reply 0


Here's an outline of how I converted the original Carousel Extended to work with Bootstrap 3.2: http://edgewebware.com/2014...

April Sadowski (0) - 3 years ago - Reply 0


Thanks!!!

maxsurguy (0) - 3 years ago - Reply 0