Php syntax for Bootstrap cart slider

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

我认为您的.row也应该是.item因为您想一次滑动4个项目。

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>