title: Bootstrap 3.3.7 multiple items carousel - advance all items instead of 1
body: <p>I've been trying to add a multiple items carousel to my page. When using the code below, the animation should be advancing 1 image. Instead, the animation advances all. I have tried multiple Stackoverflow solutions to fix it but unfortunately they don't seem to work in this case - is it because of the screen size? I would like to fix this so it either advances 2, 3 or 4 according to the screen size or one at the time but is fully functional. Any help will be much appreciated!</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>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-xs-12 col-md-12 col-centered"&gt;
          &lt;div id="carousel" class="carousel slide" data-ride="carousel" 
  data-type="multi" data-interval="6500"&gt;
              &lt;div class="carousel-inner"&gt;
                  &lt;div class="item active"&gt;
                      &lt;div class="carousel-col"&gt;
                          &lt;div class="block img-responsive"&gt;&lt;img 
  style="width:100%" src="x"&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 img-responsive"&gt;&lt;img 
  style="width:100%" src="x"&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 img-responsive"&gt;&lt;img 
  style="width:100%" src="x"&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 img-responsive"&gt;&lt;img 
  style="width:100%" src="x"&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 img-responsive"&gt;&lt;img 
  style="width:100%" src="x"&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="#carousel" 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="#carousel" 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;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>.col-centered {
  float: none;
  margin: 0 auto;
  }
  
  .carousel-control { 
  width: 8%;
  width: 0px;
  }
  .carousel-control.left,
  .carousel-control.right { 
  background-image: none !important;
  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; }
  }
  </code></pre>
  
  <p>NOTE: Adding the code below to the css doesn't fix the problem. I use Bootstrap CDN.</p>
  
  <pre><code>.carousel-inner &gt; .item.next,
  .carousel-inner &gt; .item.active.right {
    left: 0;
    -webkit-transform: translate3d(33%, 0, 0);
    -ms-transform: translate3d(33%, 0, 0);
    -o-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
  }
  
  
  .carousel-inner &gt; .item.prev,
  .carousel-inner &gt; .item.active.left {
    left: 0;
    -webkit-transform: translate3d(-33%, 0, 0);
    -ms-transform: translate3d(-33%, 0, 0);
    -o-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
  }
  </code></pre>