title: Why Thumbnail caurosel is not working on latest bootstrap?
body: <p>I am trying to create a thumbnail carousel which is having 4 columns and running one after another. And it is running fine on old bootstrap version.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But when I am using the latest version of bootstrap, it is not working.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type = "text/javascript"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type = "text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Please guide or help me to run this carousel on new version too.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-md-12 col-centered"&gt;
  
              &lt;div id="ThumbnailCarousel" class="carousel slide" data-ride="carousel" data-type="multi" data-interval="2500"&gt;
                  &lt;div class="carousel-inner"&gt;
                      &lt;div class="item active"&gt;
                          &lt;div class="carousel-col"&gt;
                              &lt;div class="block red img-responsive"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="carousel-col"&gt;
                              &lt;div class="block green img-responsive"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="carousel-col"&gt;
                              &lt;div class="block blue img-responsive"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="item"&gt;
                          &lt;div class="carousel-col"&gt;
                              &lt;div class="block yellow img-responsive"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Controls --&gt;
                  &lt;div class="left carousel-control"&gt;
                      &lt;a href="#ThumbnailCarousel" role="button" data-slide="prev"&gt;
                          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
                          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="right carousel-control"&gt;
                      &lt;a href="#ThumbnailCarousel" role="button" data-slide="next"&gt;
                          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
                          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have also used media query for the responsiveness of the carousel.</p>
  
  <pre><code>.col-centered {
      float: none;
      margin: 0 auto;
  }
  
  .carousel-control { 
      width: 8%;
      width: 0px;
  }
  .carousel-control.left,
  .carousel-control.right { 
      margin-right: 40px;
      margin-left: 32px; 
      background-image: none;
      opacity: 1;
  }
  .carousel-control &gt; a &gt; span {
      color: white;
      font-size: 29px !important;
  }
  
  .carousel-col { 
      position: relative; 
      min-height: 1px; 
      padding: 5px; 
      float: left;
   }
  
   .active &gt; div { display:none; }
   .active &gt; div:first-child { display:block; }
  
  /*xs*/
  @media (max-width: 767px) {
    .carousel-inner .active.left { left: -50%; }
    .carousel-inner .active.right { left: 50%; }
      .carousel-inner .next        { left:  50%; }
      .carousel-inner .prev            { left: -50%; }
    .carousel-col                { width: 50%; }
      .active &gt; div:first-child + div { display:block; }
  }
  
  /*sm*/
  @media (min-width: 768px) and (max-width: 991px) {
    .carousel-inner .active.left { left: -50%; }
    .carousel-inner .active.right { left: 50%; }
      .carousel-inner .next        { left:  50%; }
      .carousel-inner .prev            { left: -50%; }
    .carousel-col                { width: 50%; }
      .active &gt; div:first-child + div { display:block; }
  }
  
  /*md*/
  @media (min-width: 992px) and (max-width: 1199px) {
    .carousel-inner .active.left { left: -33%; }
    .carousel-inner .active.right { left: 33%; }
      .carousel-inner .next        { left:  33%; }
      .carousel-inner .prev            { left: -33%; }
    .carousel-col                { width: 33%; }
      .active &gt; div:first-child + div { display:block; }
    .active &gt; div:first-child + div + div { display:block; }
  }
  
  /*lg*/
  @media (min-width: 1200px) {
    .carousel-inner .active.left { left: -25%; }
    .carousel-inner .active.right{ left:  25%; }
      .carousel-inner .next        { left:  25%; }
      .carousel-inner .prev            { left: -25%; }
    .carousel-col                { width: 25%; }
      .active &gt; div:first-child + div { display:block; }
    .active &gt; div:first-child + div + div { display:block; }
      .active &gt; div:first-child + div + div + div { display:block; }
  }
  
  .block {
      width: 330px;
      height: 230px;
  }
  
  .red {background: red;}
  
  .blue {background: blue;}
  
  .green {background: green;}
  
  .yellow {background: yellow;}
  </code></pre>
  
  <p>following is the javascript which i have used</p>
  
  <pre><code>$('.carousel[data-type="multi"] .item').each(function() {
      var next = $(this).next();
      if (!next.length) {
          next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
  
      for (var i = 0; i &lt; 2; i++) {
          next = next.next();
          if (!next.length) {
              next = $(this).siblings(':first');
          }
  
          next.children(':first-child').clone().appendTo($(this));
      }
  });
  </code></pre>