Question

我希望使用自定义产品循环在我的主页上使用自举式托盘中的产品缩略图。

我通过以下代码实现了它的一部分，但这显示了一行中的单个项目。我想在一行中有5个项目，当用户点击下一个或上一个按钮时，其他项目应该滚动。

感谢您的帮助。

<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

我发现了自己的回答。在此处发布，以防其他人在将来需要帮助。它可能不是一个干净的方法，但它的工作原理，虽然您的建议是受欢迎的。

谢谢

"-"

Woocommerce使用bootstrap推荐产品轮播

1 个答案: