Twitter Cassette Bootstrap Displays Two Elements

Question

Now I implemented Twitter Bootstrap 3 Carousel , which displays one element and during the transition, shows the next element, so it looks like this:

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

I need to display two elements, and after the transition, the second element with the third:

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

Is it even possible to achieve?

I tried applying the active class to two page load elements, but Carousel no longer works. Also using the following CSS does not work:

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

Answer 1

The solution is pretty simple.

.item class has two sizes of content - 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; } 

At the moment, we need to duplicate the following elements in the current one in order to display two elements, for example [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 change the carousel transition with:

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

What all.

Answer 2

Hsz's solution worked fine until Twitter Bootstrap 3.3 added 3D transform support that overrides your transition styles (left: 50% and left: -50%)

So you need to override the default transition styles in Twitter Bootstrap with the 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% -33% if you show 3 items, etc.

Answer 3

I know this is a little outdated, but I managed to solve it,

 #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; } } } } } 

These are 4 elements forward by 1, bootstrap-sass 3.3.1 with a compass

Answer 4

The answer above works well, but it breaks when there is an odd number of carousel elements. I added some jquery to make it work odd and even

 if ($(this).siblings(':last')) { $(this).siblings(':first').find('.item-content:first-child').clone().appendTo($(this)); } else { next.find('.item-content:first-child').clone().appendTo($(this)); }