如果查看carousel的源代码，您将看到它是如何实现的。第一步是用你的产品复制他们的标记。本质上，它们的标记看起来像一个#carousel container div，而所有项目都在它们自己的div中。
<div id="carousel">
<div>
<img src="img/fruit1.png" alt="fruit1" width="200" height="200" />
<span>Apple</span>
</div>
..... further divs truncated for simplicity
</div>
要获得这样的代码，我们需要进行二次查询，然后循环查询结果。二次循环的一个不错的例子可以在法典中找到
WP_Query.
除了WooCommerce产品之外，您并没有指定太多其他产品，所以我只使用一些基本的查询参数。这将找到您最新的产品，循环浏览并打印出每个产品的特色图片和标题。
之后，问题是将此代码粘贴到所需的模板中，或通过挂钩添加。然后，加载并初始化jquery脚本。看看wp_enqueue_script 了解如何正确加载脚本。初始化脚本可以在示例的源代码中看到。请注意noConflict包装器上的部分，因为您必须调整它们的代码才能很好地使用WordPress。
$args = array ( \'post_type\' => \'product\' );
$carousel = new WP_Query( $args );
if ( $carousel->have_posts() ) :
echo \'<div id="carousel">\';
while( $carousel->have_posts() ) :
$carousel->the_post();
echo \'<div>\' . get_the_post_thumbnail( get_the_ID(), \'medium\' ) . \'<span>\'. get_the_title( get_the_ID() ) .\'</span></div>\';
endwhile;
echo \'</div><!--#carousel-->\';
endif;
// Restore original postdata
wp_reset_postdata();
