Php syntax for Bootstrap cart slider - php

Question

I am trying to do the Cart slider which can be seen at http://bootsnipp.com/snippets/Pbnxx
I am struggling with proper PHP syntax. Can anyone help me out?
The way I see it that I need to prepend .item and .row for every 4 columns, but something is glitching and doesn't work as expected
<div class="container">
<div class="row">
<div class="col-md-9">
<h3>TITLE </h3>
</div>
<div class="col-md-3">
<!-- Controls -->
<div class="controls pull-right hidden-xs">
<a class="left fa fa-chevron-left btn btn-success" href="#carousel-example"
data-slide="prev"></a>
<a class="right fa fa-chevron-right btn btn-success" href="#carousel-example"
data-slide="next"></a>
</div>
</div>
</div>
<div id="carousel-example" class="carousel slide hidden-xs" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
while ( $query->have_posts() ) :
$query->the_post();
// make new slide every 4 columns
if($i % 4 == 0) : ?>
<div class="item <?php if($a++ == 0) echo 'active'; ?>">
<div class="row">
<?php endif; ?>
<div class="col-sm-3">
<div class="col-item">
<?php echo $i; ?>
</div>
</div>
<!-- end slide every 4 columns -->
<?php if($i++ % 4 == 0) : ?>
</div> <!-- row -->
</div> <!-- slide -->
<?php endif; ?>
<?php endwhile; ?>
</div> <!-- end carousel -->
</div> <!-- carousel-example -->
</div> <!-- container -->

Answer 1

I think your .row should be also .item because you want to slide 4 items at time.

Answer 2

Here you have my code using smarty. I used array_chunk($items, 4) and nested loops.
<div class="carousel-inner">
{foreach $recipebox.recipes as $key=>$recipeSet}
{if $key == 0}
<div class="row item active">
{else}
<div class="row item">
{/if}
{foreach $recipeSet as $recipe }
<div class="col-xs-3">
// box content
</div>
{/foreach}
</div>
{/foreach}
</div>