Carousel with Thumbnails in Bootstrap 3.0

问题:

This is a working example for Bootstrap 2, but I need this for Bootstrap 3.0.: Bootstrap Thumbnail Slider

回答1:

This can be done using the grid inside each carousel item.

       
                 
                     
                         
                             
..                             
                             
..                             
                             
..                             
                             
..                             
                         
                                              
                     ...add more item(s)                  
         
 

Demo example thumbnail slider using the carousel:
http://www.bootply.com/81478

Another example with carousel indicators as thumbnails: http://www.bootply.com/79859

回答2:

@Skelly 's answer is correct. It won't let me add a comment (

col-xs-3  

class to each of the thumbnails, like this:

class="col-md-3 col-xs-3" 

then it should stay the way you want it when sized down to phone width.

回答3:

Just found out a great plugin for this:

http://flexslider.woothemes.com/

Regards

回答4:

1. Use the carousel's indicators to display thumbnails.
2. Position the thumbnails outside of the main carousel with CSS.
3. Set the maximum height of the indicators to not be larger than the thumbnails.
4. Whenever the carousel has slid, update the position of the indicators, positioning the active indicator in the middle of the indicators.

I'm using this on my site (for example here), but I'm using some extra stuff to do lazy loading, meaning extracting the code isn't as straightforward as I would like it to be for putting it in a fiddle.

Also, my templating engine is smarty, but I'm sure you get the idea.

The meat...

Updating the indicators:

     {assign var='walker' value=0}     {foreach from=$item["imagearray"] key="key" item="value"}         
             
          {assign var='walker' value=1 + $walker}     {/foreach} 

Changing the CSS related to the indicators:

.carousel-indicators {     bottom:-50px;     height: 36px;     overflow-x: hidden;     white-space: nowrap; }  .carousel-indicators li {     text-indent: 0;     width: 34px !important;     height: 34px !important;     border-radius: 0; }  .carousel-indicators li img {     width: 32px;     height: 32px;     opacity: 0.5; }  .carousel-indicators li:hover img, .carousel-indicators li.active img {     opacity: 1; }  .carousel-indicators .active {     border-color: #337ab7; } 

When the carousel has slid, update the list of thumbnails:

$('#myCarousel').on('slid.bs.carousel', function() {     var widthEstimate = -1 * $(".carousel-indicators li:first").position().left + $(".carousel-indicators li:last").position().left + $(".carousel-indicators li:last").width();      var newIndicatorPosition = $(".carousel-indicators li.active").position().left + $(".carousel-indicators li.active").width() / 2;     var toScroll = newIndicatorPosition + indicatorPosition;     var adjustedScroll = toScroll - ($(".carousel-indicators").width() / 2);     if (adjustedScroll  widthEstimate - $(".carousel-indicators").width())         adjustedScroll = widthEstimate - $(".carousel-indicators").width();      $('.carousel-indicators').animate({ scrollLeft: adjustedScroll }, 800);      indicatorPosition = adjustedScroll; }); 

And, when your page loads, set the initial scroll position of the thumbnails:

var indicatorPosition = 0; 

文章来源: Carousel with Thumbnails in Bootstrap 3.0