Woocommerce featured product carousel using bootstrap

Question

I want to have thumbnail images of the products on my home page in a bootstrap carousal using a custom product loop.

I have achieved a part of it through following code but this is showing a single item in a row. I want to have 5 items in a single row and when user clicks next or previous buttons other item should scroll in.

Your help is appreciated.

<div id="featured" class="carousel slide ">
    <div class="carousel-inner ">
        <?php
        $args          = array(
            'post_type' => 'product',
        'meta_key' => '_featured',
        'meta_value' => 'yes',
        'numberposts'     => 6,
        'posts_per_page' => 6
        );
        $featured_loop = new WP_Query( $args );//global $product;
        if ( $featured_loop->have_posts() ):
            while ( $featured_loop->have_posts() ) : $featured_loop->the_post(); ?>
                                        <div class=
                                      <?php
                                        echo '"';
                                        echo 'item '; 
                                        if ($i == 1) {
                                          echo 'active';
                                        }

                                        echo '"';

                                        ?>>
                    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
                        <div class="thumbnail">
                            <i class="tag"></i>
                            <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                <?php echo woocommerce_get_product_thumbnail(); ?>
                            </a>
                        </div>
                        <div class="panel-body text-center">
                            <h6><?php the_title(); ?> </h6>
                        </div>
                    </div>
                </div>

            <?php  $i++; endwhile; ?>
            <a class="left carousel-control" href="#featured" data-slide="prev"><i class="fa fa-arrow-left"></i></a>
            <a class="right carousel-control" href="#featured" data-slide="next"><i class="fa fa-arrow-right"></i></a>
            <?php wp_reset_postdata(); endif; ?>
    </div>
</div>
<?php wp_reset_query(); ?>

Answer 1

I found out answer my self. Posting here in case anyone else needs help in future. It may not be a clean approach but it works, although your suggestions are welcome.

Thanks

<div id="featured" class="carousel slide ">
        <div class="carousel-inner">
            <?php
            $args = array(
                'post_type' => 'product',
                'meta_key' => '_featured',
                'meta_value' => 'yes',
                'posts_per_page' => 10
                );

             $featured_loop = new WP_Query( $args );//global $product;

             if ( $featured_loop->have_posts() ):
                $count=0; 
                while ( $featured_loop->have_posts() ) : $featured_loop->the_post();
                $count++;
                if ($count %3 == 1) :


                ?>  

                <div class=
                <?php
                echo '"';
                echo 'item ';
                if($count == 1)
                {
                    echo 'active';
                } 
                echo '"';
                ?>>
                <?php endif; ?>

                    <div class="col-xs-6 col-sm-4 col-md-4 col-lg-4 ">
                        <div class="thumbnail">
                            <i class="tag"></i>
                                <a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                    <?php echo woocommerce_get_product_thumbnail(); ?>
                                </a>
                        </div>
                        <div class="panel-body text-center">
                            <h6><?php the_title(); ?> </h6>
                        </div>
                   </div>

               <?php if ($count % 3 == 0):?>


               </div> 

               <!-- items ends here --> 

               <?php endif; endwhile;?>
               <?php wp_reset_postdata(); endif; ?>


        </div><!-- end of carousel-inner -->
            <a class="left carousel-control" href="#featured" data-slide="prev">‹</a>
            <a class="right carousel-control" href="#featured" data-slide="next">›</a>
    </div> <!-- end of carousel -->
    <?php wp_reset_query(); ?>