I have this code where when you click the "next" button, it scrolls only 1 image at a time. Knowing that Carousel is multi-item with 4 columns.
How do I make the 4-by-4 scrolling when I click the next button?
$('.carousel[data-type="multi"] .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));
}
});
PHP / HTML
<div class="col-xs-12 col-md-12 col-centered aux_carousel">
<div id="carousel" class="carousel slide" data-ride="carousel" data-type="multi" >
<div class="carousel-inner">
<?
$resultado_o_que_fizemos = "SELECT * FROM o_que_fizemos order by id DESC ";
$lista_o_que_fizemos = mysql_query($resultado_o_que_fizemos) or die (mysql_error());
while ($listagem_o_que_fizemos = mysql_fetch_array($lista_o_que_fizemos)){
$i++;
?>
<? if (($i=='1')){?>
<div class="item active">
<div class="carousel-col">
<div class="tumbWrapper borda_servicos">
<a href="o-que-fazemos/<? echo $listagem_o_que_fizemos ["url"] ?>" class="imgTumb imgWrapper bgShadow light">
<img src="admin/uploads/<? echo $listagem_o_que_fizemos ["foto"] ?>" class="img-responsive" alt="">
</a>
<? echo $i ?> <h6 class="h6 as"><a href="o-que-fazemos/<? echo $listagem_o_que_fizemos ["url"] ?>"><? echo $listagem_o_que_fizemos ["titulo"] ?></a></h6>
<div class="tumbContent small">
<a href="o-que-fazemos/<? echo $listagem_o_que_fizemos ["url"] ?>" alt="<? echo $listagem_o_que_fizemos ["titulo"] ?>"><?echo mb_strimwidth($listagem_o_que_fizemos ['texto'], 0, 200, "..."); ?></p></a>
</div>
</div>
</div>
</div>
<? }?>
<? if (($i>'1')){?>
<div class="item ">
<div class="carousel-col">
<div class="tumbWrapper borda_servicos">
<a href="o-que-fazemos/<? echo $listagem_o_que_fizemos ["url"] ?>" class="imgTumb imgWrapper bgShadow light">
<img src="admin/uploads/<? echo $listagem_o_que_fizemos ["foto"] ?>" class="img-responsive" alt="">
</a>
<? echo $i ?> <h6 class="h6 as"><a href="o-que-fazemos/<? echo $listagem_o_que_fizemos ["url"] ?>"><? echo $listagem_o_que_fizemos ["titulo"] ?></a></h6>
<div class="tumbContent small">
<a href="o-que-fazemos/<? echo $listagem_o_que_fizemos ["url"] ?>" alt="<? echo $listagem_o_que_fizemos ["titulo"] ?>"><?echo mb_strimwidth($listagem_o_que_fizemos ['texto'], 0, 200, "..."); ?></p></a>
</div>
</div>
</div>
</div>
<? }?>
<?}?>
</div>
<!-- Controls -->
<div class="left carousel-control">
<a href="#carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
</div>
<div class="right carousel-control">
<a href="#carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>