title: bootstrap: Multiple image carousel only shows one slide
body: <p>I am using two sliders, the issue is on the second one. It should show multiple images at once then slide one item at a time. But in this situation, it only shows on item.
  I tried to follow all the steps on this thread but it still doesn't work:
  <a href="https://stackoverflow.com/questions/24926919/bootstrap-slide-only-one-image-among-the-multiple-images-in-an-item-of-the-caro">Bootstrap: Slide only one image among the multiple images in an item of the carousel</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#myCarousel').carousel({
    interval: 4000
  })
  
  $('.carousel .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>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.carousel-inner .active.left {
    left: -25%;
  }
  
  .carousel-inner .active.right {
    left: 25%;
  }
  
  .carousel-inner .next {
    left: 25%;
  }
  
  .carousel-inner .prev {
    left: -25%;
  }
  
  .carousel-control {
    width: 4%;
  }
  
  .carousel-control.left,
  .carousel-control.right {
    margin-left: 15px;
    background-image: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /&gt;
  
  &lt;div class="container-fluid"&gt;
    &lt;div class="col-sm-12 margin-top-20"&gt;
      &lt;div id="largeCarousel" class="carousel slide" data-ride="carousel"&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#largeCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#largeCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#largeCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;div class="carousel-inner custom_carousel_holder"&gt;
          &lt;div class="item active"&gt;
            &lt;img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" /&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Los Angeles&lt;/h3&gt;
              &lt;p&gt;LA is always so much fun!&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" /&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;Chicago&lt;/h3&gt;
              &lt;p&gt;Thank you, Chicago!&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
            &lt;img class="img-responsive center-block" src="/attigo2/public/images/hi-res barbatos.jpg" alt="Barbie" /&gt;
            &lt;div class="carousel-caption"&gt;
              &lt;h3&gt;New York&lt;/h3&gt;
              &lt;p&gt;We love the Big Apple!&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="left carousel-control" href="#largeCarousel" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="right carousel-control" href="#largeCarousel" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right"&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 class="col-sm-12 text-center margin-top-20"&gt;
      &lt;h3&gt;Discover Our Brands&lt;/h3&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-12 text-center"&gt;
      &lt;h3&gt;Bootstrap 3 Multiple Slide Carousel&lt;/h3&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6 col-md-offset-3"&gt;
      &lt;div class="carousel slide" id="myCarousel"&gt;
        &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
            &lt;div class="col-xs-3"&gt;
              &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/e499e4/fff&amp;amp;text=1" class="img-responsive"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div class="col-xs-3"&gt;
              &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/e477e4/fff&amp;amp;text=2" class="img-responsive"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div class="col-xs-3"&gt;
              &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/eeeeee&amp;amp;text=3" class="img-responsive"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div class="col-xs-3"&gt;
              &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/f4f4f4&amp;amp;text=4" class="img-responsive"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div class="col-xs-3"&gt;
              &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/f566f5/333&amp;amp;text=5" class="img-responsive"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div class="col-xs-3"&gt;
              &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/f477f4/fff&amp;amp;text=6" class="img-responsive"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div class="col-xs-3"&gt;
              &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/eeeeee&amp;amp;text=7" class="img-responsive"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div class="col-xs-3"&gt;
              &lt;a href="#"&gt;&lt;img src="http://placehold.it/500/fcfcfc/333&amp;amp;text=8" class="img-responsive"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;&lt;i class="glyphicon glyphicon-chevron-left"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;&lt;i class="glyphicon glyphicon-chevron-right"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I already checked out the samples on the provided link above and copy pasted the heck out of it and it still doesn't work. I'm not really sure if i'm causing a conflict on both sliders.</p>