How to move from one in an element to the carousel?

Navigation
2

I'm using Boostrap with the carousel to pass the elements of a menu that I have.

I want 4 items at a time to appear and pass one by one without noticing the effect.

With the code I have, the effect is to go 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 idea how to do this?

    
asked by anonymous 22.07.2014 / 18:16

1 answer

3

You can solve the problem with CSS only. I relied on in this example and in this response from SOen .

The idea is to take advantage of carousel absolute positioning and purposely reposition it to the size of the missing item (in the case of 4 items, 25% of container space). I carousel also displays an animation of just one item by 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

    
23.07.2014 / 02:46
Doubt in the complexity analysis of an algorithm Which characters can I not use for cookie names?