I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen. Each item of my project is represented by the following code:

<div class="wrapper">
    <img src=".jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />

    <div class="overlay">
        <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
</div>

I'm working on a project available on JSFiddle. As you can notice, there are 6 items displayed and I would like to make a carousel to display 3 items per slide. After researching this issue, I find this awesome project on Codepen. Each item of my project is represented by the following code:

<div class="wrapper">
    <img src="https://photos-2.dropbox./t/2/AACS3GcxUnMu4DpsfC5pF-zF55I8WHf1blL4AvkQULu1Gw/12/226666032/jpeg/32x32/1/_/1/2/3.jpg/EO2pmKoBGHsgAigC/iV0gUV38M-Y4EoQJWevkk6_etV3EZi1baTQUzImrReM?size=1024x768&size_mode=3" alt="" />

    <div class="overlay">
        <h2 class="header">A Movie in the Park: Kung Fu Panda</h2>
    </div>
</div>

while the item on Codepen is represented by this one:

<div class="item active">
    <div class="col-xs-4">
        <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a>
    </div>
</div>

Whenever I try to remove the item's code in Codepen and place my item's code from JSFiddle, the slider stops working.

Please let me know how to solve this problem.

• javascript
• jquery
• css
• twitter-bootstrap

• If you're going to get adventurous with your carousel, then perhaps you should use a different plugin.For example, slick will do this for you. – DavidG Commented Mar 27, 2016 at 1:31
• Thanks for your ment. I have been struggling for a while trying to implement that plugin but unable to succeed. I think Im going to need your help one more time. – user6005498 Commented Mar 27, 2016 at 1:35

2 Answers 2

Is this what you wanted? Please check fiddle, you will understand, why it wasn't working. You may have missed some libraries and CSS.

$('#theCarousel').carousel({
  interval: false
})

$('.multi-item-carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  if (next.next().length>0) {
    next.next().children(':first-child').clone().appendTo($(this));
  }
  else {
  	$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
  }
});

.multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: .6s ease-in-out all;
    }
    .active{
      &.left{
        left:-33%;
      }
      &.right{
        left:33%;
      }
    }
    .next{
      left: 33%;
    }
    .prev{
      left: -33%;
    }
  }
  .carouse-control{
    &.left, &.right{
      background-image: none;
    }
  }

  @media all and (transform-3d), (-webkit-transform-3d) {
    &{
      .carousel-inner {
        > .item{
          transition: .6s ease-in-out all;
          -webkit-backface-visibility: visible;
          backface-visibility: visible;
          -webkit-perspective: none;
          -webkit-transform: none!important;
          transform: none!important;
        }
      }
    }
  }
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn./bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-8 col-md-offset-2">
    <div class="carousel slide multi-item-carousel" id="theCarousel">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-4 wrapper">
            <a href="#1"><img src="http://placehold.it/300/f44336/000000" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/e91e63/000000" class="img-responsive"></a>
            <div class="overlay">
              <h5 class="header">A Movie in the Park: Kung Fu Panda</h5>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/9c27b0/000000" class="img-responsive"></a>
            <h5 class="header">Batman Return</h5>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/673ab7/000000" class="img-responsive"></a>
            <h5 class="header">Deadpool</h5>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/4caf50/000000" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-4">
            <a href="#1"><img src="http://placehold.it/300/8bc34a/000000" class="img-responsive"></a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

Read the carousel documentation and notice the format of each item (specifically the addition of .item and .active).

This wrapper around each image is making it so that 3 elements are displayed per row:

<div class="col-xs-4">
    ...
</div>

(in parison, using .col-xs-12 would indicate 1 image per displayed row, and .col-xs-6 would indicate 2 images per displayed row)