Twitter Bootstrap Carousel display two items

Question

Right now I have implemented Twitter Bootstrap 3 Carousel which displays one item and during transition, shows next element, so it looks like:

 [1]    /transition/   [2]    /transition/   [3]   ...

I have to display two items and after transition display second element with third one:

[1][2]  /transition/  [2][3]  /transition/  [3][4] ...

Is it even possible to achieve ?

I have tried to apply active class to the two elements on page load, but Carousel does not work anymore. Also using following CSS does not work:

.item.active + .item {
  display: block !important;
}

Answer 1

Hsz's solution worked fine until Twitter Bootstrap 3.3 where was added support for 3D transform which will override your styles for transition (left: 50% and left: -50%)

Therefore you have to override Twitter Bootstrap default transition styles with following css:

@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item.next,
  .carousel-inner > .item.active.right {
      left: 0;
      -webkit-transform: translate3d(50%, 0, 0);
      transform: translate3d(50%, 0, 0);
  }
  .carousel-inner > .item.prev,
  .carousel-inner > .item.active.left {
      left: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
  }
}

You may need to change 50% to 33% if you display 3 items etc

Answer 2

Solution is quite simple.

.item class has two sizes of content - lets say 400px. .item-content has 200px:

<div class="carousel slide">
  <div class="carousel-inner">
    <div class="item active">
      <div class="item-content">ITEM 1</div>
    </div>
    <div class="item">
      <div class="item-content">ITEM 2</div>
    </div>
    <div class="item">
      <div class="item-content">ITEM 3</div>
    </div>
    <div class="item">
      <div class="item-content">ITEM 4</div>
    </div>
  </div>
</div>

And CSS:

.carousel .item {
  width: 400px;
}
.carousel .item .item-content {
  width: 200px;
}

Right now we have to duplicate next items into current one to display two items like [1][2] [2][3] [3][4] [4][1]

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.find('.item-content:first-child').clone().appendTo($(this));
});

And modify carousel transition with:

.carousel-inner .active.left { left: -50%; }
.carousel-inner .next        { left:  50%; }

That's all.

Answer 3

I know it's bit old but I managed to solve it with,

#carousel-galleries{
  .carousel-inner{
    .item{
      @media all and (transform-3d), (-webkit-transform-3d) {
        @include transition-transform(0.6s ease-in-out);
        @include backface-visibility(hidden);
        @include perspective(1000);

        &.next,
        &.active.right {
          @include translate3d(25%, 0, 0);
          left: 0;
        }
        &.prev,
        &.active.left {
          @include translate3d(-25%, 0, 0);
          left: 0;
        }
        &.next.left,
        &.prev.right,
        &.active {
          @include translate3d(0, 0, 0);
          left: 0;
        }
      }
    }
  }
}

This is 4 items advance by 1, bootstrap-sass 3.3.1 with compass