Carousel bootstrap scrolling entire

Question

I have this code where when you click the "next" button, you scroll only 1 image at a time. Knowing that Carousel is multi-item with 4 columns.

How do I so that when you click the next button, scroll 4 by 4?

$('.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>