3

我正在尝试使用滑块来展示我在帖子中的图像。我目前已经完成了所有设置，但我只有一个 li 元素可以显示所有三个图像。我想要三个 li 元素，每个元素显示一个图像，但我不知道如何自动隔离每个图像。任何帮助将不胜感激！

您可以在此处查看当前状态：http: //mksgear.com/shop/test-product/

这就是我的代码的样子：

<ul class="slides">

  <li class="slide">

<?php if ( has_post_thumbnail() ) : ?>

    <?php echo do_shortcode('[gallery option1="value1"]'); ?>


<?php else : ?>

    <img src="<?php echo woocommerce_placeholder_img_src(); ?>" alt="Placeholder" />

<?php endif; ?>

  </li>
</ul>
4

1 回答 1

1

我不确定我是否正确理解了你的问题，但我会给出一个答案。如果我误解了您要做什么，请为我澄清一下，我会更新我的答案。

您可以itemtag="li"在图库短代码中使用将每个图像包装在li. 您需要删除您<li class="slide">的代码行，并且可能使用 jQuery 将“幻灯片”类添加回生成的li标签。所以你可以做这样的事情：

:此外，在 if/else 语句中 使用时，您的代码是否会呈现图库？

<script>
jQuery(document).ready(function() {
    jQuery("#slides li").addClass("slide");
});
</script>

<ul class="slides">

    <?php if ( has_post_thumbnail() ) { ?>

        <?php echo do_shortcode('[gallery itemtag="li" option1="value1"]'); ?>

    <?php } else { ?>

        <img src="<?php get_bloginfo( 'stylesheet_directory' ); ?>/images/thumbnail-default.jpg" />

    <?php } ?>

</ul>

将此添加到您的页脚，您可以将其添加到与 jQuery 相同的 document.ready 中以添加类幻灯片。只需将其复制并粘贴到jQuery("slides li").addClass("slide");. 如果需要，您可以在此调用中调整高度、宽度或任何其他选项。这有望奏效。

jQuery("#slides").advancedSlider({
width: 900, 
height: 460, 
responsive: 1, 
skin: 'light-round'
});
于 2012-12-22T23:09:25.347 回答