Question

我在wordpress中使用owl-carousel，我正试图在site上显示相同的html结果：

<div class="owl-carousel owl-theme owl-loaded">
    <div class="owl-stage-outer">
        <div class="owl-stage">
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
            <div class="owl-item">...</div>
        </div>
    </div>
    <div class="owl-controls">
        <div class="owl-nav">
            <div class="owl-prev">prev</div>
            <div class="owl-next">next</div>
        </div>
        <div class="owl-dots">
            <div class="owl-dot active"><span></span></div>
            <div class="owl-dot"><span></span></div>
            <div class="owl-dot"><span></span></div>
        </div>
    </div>
</div>

正如您所看到的那样，owl-stage-outer包含滑块的项目，在底部我们可以找到包含要向右或向左导航的按钮的owl-controls类。

现在在wordpress我有这个模板结构：

<div id="owl-featured" class="owl-carousel owl-theme">

    <?php //Check if only one post is featured ?>

    <?php if ( is_home() && !is_paged() && ( ot_get_option('featured-posts-count') == '1') && $featured->have_posts() ): // No slider if 1 post is featured ?>

        <?php while ($featured->have_posts() ): $featured->the_post(); ?>
            <?php get_template_part('content-featured'); ?>
        <?php endwhile; ?>

    <?php elseif ( is_home() && !is_paged() && ( ot_get_option('featured-posts-count') !='0') && $featured->have_posts() ): // Show slider if posts are not 1 or 0 ?>

        <?php while ( $featured->have_posts() ): $featured->the_post(); ?>
            <?php get_template_part('content-featured'); ?>
        <?php endwhile; ?>

    <?php endif; ?>

    <div class="owl-controls">
        <div class="owl-pagination"></div>
        <div class="owl-buttons"></div>
    </div>
</div>

我已经创建了一个div作为轮播容器，在其中我插入了wordpress查询以获取内容，现在你可以在条件结束时看到{{1} }，实际上我需要在owl-controls之外获得控件，如第一个提供的示例所示，但我得到的结果如下：

owl-wrapper

你可以看到<div id="owl-featured" class="owl-carousel owl-theme"> <div class="owl-wrapper-outer"> <div class="owl-wrapper"> <div class="owl-item"> <div class="owl-item"> ... ... <div class="owl-item"> <div class="owl-controls"> <div class="owl-pagination"></div> <div class="owl-buttons"></div> </div> </div> </div> </div> </div>在owl-controls里面，我不明白为什么会发生这种情况，我从三小时开始坚持这个，我无法找到解决办法

PS：这是滑块的js初始化：

owl-item

有人知道这个错误在哪里？

Answer 1

@Aalok，您可能首先需要看基本演示： https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html

在初始猫头鹰旋转木马之前，保持您的物品清洁作为基本演示;
您只能自定义项目内容＆＃34; <h4>number</h4>＆＃34;;（大多数情况下都应该这样做）;
关于您的自定义控件，您需要添加＆＃34; owl-carousel＆＃34;并添加自定义点击事件。
当您初始化猫头鹰旋转木马时，猫头鹰帮助用＆＃34; owl-item＆＃34;包裹您的物品，然后用＆＃34; owl-stage＆＃34;包裹所有物品，然后添加猫头鹰＆＃ 39;控制dom＆＃34; owl-controls＆＃34;，并包裹＆＃34; owl-stage＆＃34; ＆＃34;猫头鹰控制＆＃34;与＆＃34; owl-stage-outer＆＃34;;

无法在包装类外添加控件

1 个答案: