在Carousel Slider中显示/包装Woocommerce产品-Java 学习之路

我想通过短代码IE显示产品：[product_category category =“test”per_page =“12”]在旋转木马中 .

我有Flexslider设置，我尝试过将其添加到loop-start.php

<link rel="stylesheet" href="https://googledrive.com/host/0B4TRd-vaKaSkWUFRVkRiM1g2eGs" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE"></script>

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
                selector : ".products > li",
                animation : "slide",
                controlsContainer : ".flex-container"
            });
});
</script> 

<div class="flexslider">
<ul class="products">

并在loop-end.php上关闭ul之后的div

虽然我根本没有运气：/它适用于测试html文件就好了 .

我想要这样的原因，而不只是使用一些插件是我有覆盖弹出，不能使用任何Carousel插件我尝试过，我也想以这种方式显示多个类别 .

谢谢你的帮助

1 回答

最初我认为你的标记没有修改循环 . 虽然我认为jQuery选择器 ul.products 会起作用 . 因为它应该是容器及其直接子项作为幻灯片 .

我建议你查看浏览器开发人员控制台，看看你得到的是什么样的脚本错误 . 但是我怀疑你看到的功能没有定义，因为你没有使用no conflict wrappers . 你不知道在开始时这让我多么沮丧 .

因此，您的脚本应该看起来像（虽然我认为您应该将它添加到页脚：

function so_28486348_print_footer(){ ?>
    <script type="text/javascript" charset="utf-8">
    jQuery(window).load(function() {
          $('ul.products').flexslider({
                    selector : "li.product",
                    animation : "slide",
                    controlsContainer : ".flex-container"
           });
    });
    </script> 
<?php }
add_action( 'wp_print_footer_scripts', 'so_28486348_print_footer

我还建议通过 wp_enqueue_script 加载所有脚本（至少是外部脚本）（参见上面的codex链接）

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script', 'https://googledrive.com/host/0B4TRd-vaKaSkUHZIaTBXR0JLdVE' ,
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

回复于 2024-05-15T19:34:16+08:00

在Carousel Slider中显示/包装Woocommerce产品

1 回答

相关问题