How to go from one to one element in the Carousel?

Question

I’m using Boostrap with Carousel to pass the menu elements I have.

I want four elements presented at a time and that pass one by one without noticing the effect.

With the code I have, the effect is to pass 4 at a time.

You can see the effect here on jsfiddle and see the code below.

Jquery:

<script type="text/javascript">
$('#myCarousel').carousel({
      interval: 10000
});
$('.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<2;i++) {
        next=next.next();
        if (!next.length) {
            next = $(this).siblings(':first');
        }

        next.children(':first-child').clone().appendTo($(this));
      }
    });
</script>

HTML:

<div class="row">
<div class="carousel slide" id="myCarousel">
 <div class="carousel-inner">

<div class="item active">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">texto 1</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">texto 2</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">texto 3</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">texto 4</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">texto 5</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">texto 6</p>
    </div>
</div>
<div class="item">
    <div class="col-xs-3" style="padding-left: 11px;" >
        <a href="#" title="texto1"> <img
            src="http://musiccaptains.com/zh/wp-content/uploads/2012/09/Account.png" class="center-block" 
            />
        </a>
        <p class="lead text-center" style="padding-top: 20px;">texto 7</p>
    </div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>

Does anyone have any other idea how to do that effect?

Answer 1

You can solve the problem only with CSS. I based myself in this example and in Soen’s reply.

The idea is to take advantage of the absolute positioning of Carousel and reposition it purposely to the size of the disappearing item (in the case of 4 items, 25% of the container space). I took the opportunity to fix a bug of the original solution, in my version the Carousel also displays an animation of only one item when clicking the left arrow:

.carousel-inner .active.left {
    left: -25%;
}
.carousel-inner .active.right {
    left: 25%;
}
.carousel-inner .next {
    left: 25%;
}
.carousel-inner .prev {
    left: -25%;
} 

Jsfiddle