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

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

Similar snippets: See More


Comments:

April Sadowski 2014-09-10 16:44:15
    Here's an outline of how I converted the original Carousel Extended to work with Bootstrap 3.2: http://edgewebware.com/2014...
maxsurguy 2014-09-10 19:06:01
    Thanks!!!
Garen Meserlian 2014-09-19 12:25:20
    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.
April Sadowski 2014-09-24 14:24:41
    If you could post into a fiddle/bootply, I can check it out.
Sergey Chanaev 2014-11-03 19:42:15
    I've found the issue he's talking about. It is in JS at the following line:
maxsurguy 2015-01-23 01:00:39
    Also I think id_selector should be renamed to selectorId otherwise I'm seeing errors in console and the snippet doesn't work properly
craig 2014-10-21 14:33:09
    having this same problem!
TavoQiqe 2014-09-21 10:48:26
    Awesome, thanks for sharing your work with us
Vladimir Zubkov 2014-09-21 21:01:23
    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?
April Sadowski 2014-09-24 14:25:13
    Please post into a fiddle/bootply so I can check it out.
Sanna 2014-09-25 08:21:05
    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.
April Sadowski 2014-09-26 14:13:41
    Yes. You would just have to modify output because by default, Bootstrap image grids are stacked vertically in XS. Rather ugly :)
Miguel Machado 2014-09-25 20:55:13
    great job.. thanks for sharing with us.. ;)
Guest 2014-10-09 21:21:16
    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.
April Sadowski 2014-10-21 20:11:50
    The ID's would all have to be unique.
Alex de Graaff 2014-10-16 11:18:00
    Thanks a lot for the slider, great work
vonBrown 2014-10-17 12:36:21
    How to resize the pictures as well as the whole carousel structure?
April Sadowski 2014-11-20 21:11:16
    Use the Bootstrap grid system to change widths.
Mirchu 2014-10-31 07:35:08
    check image carousel here http://www.mirchu.net/rook-...
Wagner Nogueira 2014-11-04 17:55:56
    what size of image in pixel?
Someone 2014-11-06 10:53:47
    how to change the width of carousel ?
April Sadowski 2014-11-20 21:09:29
    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).
Raquel 2014-11-19 10:56:08
    It not works with bootstrap 3.3.1?
Raquel 2014-11-19 11:06:28
    It not works with Bootstrap 3.3.1?
tommy 2015-01-09 23:17:42
    Great stuff.
maxsurguy 2015-01-23 01:01:04
    Could you please create a snippet and post the link to it here?
Ser Osis 2015-04-26 08:40:38
    I found that you have to specify down through the id and classes
Joel Diaz 2016-08-13 16:29:23
    Thank you Ser Osis!!
Jonathan Gregorio Rodriguez To 2017-05-29 19:50:13
    Thank you, you helped me a lot.
Aarón 2015-01-10 03:23:47
    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.
Free 2015-03-20 12:26:16
    I have the same issue
Gennady 2015-12-01 19:14:34
    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.
John 2015-01-22 14:19:53
    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:
John 2015-01-22 20:28:55
    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 2015-01-22 20:57:57
    Sorted, me being silly. I had the rang JS in!
Dave 2015-01-30 10:01:21
    Great work, I'm struggling to alter it to my own needs though.
Lars 2015-02-24 00:22:27
    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?
RBNZ 2015-08-31 08:32:29
    Is great and I like it, but how can I give a style to the active thumb?
Azhar Uddin 2015-10-20 09:46:14
    whenever i click on any of the next/prev button for the first time , it
karan balaji 2016-07-31 19:32:02
    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 ?
James Allan 2016-08-03 18:25:46
    did u fix your problem?
im having issue with the thumbs too
im using dynamically with php
James Allan 2016-08-03 18:35:00
    im having a problem plz someone help
http://stackoverflow.com/qu...
Bryan Reas 2016-10-03 14:12:44
    Hi Im just wondering if this can be applied in AngularJs.
This Feature is really fit for my project but mine is on Angular.
Max 2016-12-26 17:08:46
    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>
Jonathan Gregorio Rodriguez To 2017-05-29 19:50:47
    Thank you, you helped me a lot
Muhammad iqbal 2017-02-17 21:42:54
    Awesome brothrt!!
all script is working but not moving text with thumbnail images.please guide me how can i solve this issue ?
Sergey Zhelanov 2017-04-13 11:59:10
    How to make the active previews be highlighted? Add Active Class?
Sergey Zhelanov 2017-04-20 10:45:00
    Hello.
How to make an active preview?
elodie gaborit 2017-06-26 09:30:33
    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?
Création-sites Webcreation 2017-06-26 11:22:47
    Can we make a slide carousel with infinite image? THANK YOU

Commenting will be back soon.