Carousel with Thumbnails in Bootstrap 3 0

Question

I need to make Bootstrap 3 0 Carousel to display a slide of thumbnails  How can I do this  This is an image of what I  m looking for     This is a working example for Bootstrap 2  but I need this for Bootstrap 3 0   Bootstrap Thumbnail Slider

User · Answer

Skelly  s answer is correct   It won t let me add a comment   lt 50 rep     but to answer your question on his answer  In the example he linked  if you add  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

User · Answer

Use the carousel s indicators to display thumbnails  Position the thumbnails outside of the main carousel with CSS  Set the maximum height of the indicators to not be larger than the thumbnails  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    lt ol class  carousel-indicators  gt       assign var  walker  value 0       foreach from  item  imagearray   key  key  item  value            lt li data-target   myCarousel  data-slide-to    walker   if  walker    0  class  active   if  gt               lt img src  http   farm  value  farm    static flickr com   value  server      value  id      value  secret    s jpg  gt           lt  li gt            assign var  walker  value 1    walker        foreach   lt  ol gt    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  lt  0          adjustedScroll   0       if  adjustedScroll  gt  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

User · Answer

Bootstrap 4  update 2019   A multi-item carousel can be accomplished in several ways as explained here  Another option is to use separate thumbnails to navigate the carousel slides   Bootstrap 3  original answer   This can be done using the grid inside each carousel item           lt div id  myCarousel  class  carousel slide  gt                   lt div class  carousel-inner  gt                       lt div class  item active  gt                           lt div class  row  gt                               lt div class  col-sm-3  gt                                 lt  div gt                               lt div class  col-sm-3  gt                                 lt  div gt                               lt div class  col-sm-3  gt                                 lt  div gt                               lt div class  col-sm-3  gt                                 lt  div gt                           lt  div gt                           lt  -- row-- gt                       lt  div gt                         add more item s                    lt  div gt           lt  div gt    Demo example thumbnail slider using the carousel  http   www bootply com 81478  Another example with carousel indicators as thumbnails  http   www bootply com 79859

User · Answer

Just found out a great plugin for this   http   flexslider woothemes com   Regards

[twitter-bootstrap] Carousel with Thumbnails in Bootstrap 3.0

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to slider

Examples related to carousel

Examples related to thumbnails