Bootstrap Carousel Multi Items Move One Items at once [duplicate]

Question

I've tried to create multiple items carousel using bootstrap. My problem is it moves all 3 items at ones instead just one. Please see demo here:

http://plnkr.co/edit/Fl0HZaU5x5ZkPEVo87u3?p=preview

  $('#myCarousel').carousel({
    interval: 10000
  })
  console.log($('.item'))
  $('.item').each(function() {

    var next = $(this).next();
    console.log(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));
    }
  });

Answer 1

Bootstrap added CSS3 carousel transforms in 3.3.0. See #13074

Adding the following css fixes it:

.carousel-inner > .item.next,
.carousel-inner > .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 > .item.prev,
.carousel-inner > .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);
}

Bootply