无法在包装类之外添加控件答案

【问题标题】：Cannot add controls outside wrapper class无法在包装类之外添加控件
【发布时间】：2017-08-03 15:10:10
【问题描述】：

我在 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 查询以获取内容，现在您可以在条件末尾看到我有 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 位于owl-item 内，我不明白为什么会发生这种情况，我坚持了三个小时，无法找到解决方案。

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

$("#owl-featured").owlCarousel({
    nav: true,
    navContainer: '.owl-buttons',
    dotData: true,
    dotsContainer: '.owl-pagination',
    dotClass: 'owl-page',
    stageOuterClass: 'owl-wrapper-outer',
    stageClass: 'owl-wrapper',
    navContainerClass: 'owl-controls',
    navText : ['prev','next'],
    items : 3,
    itemsDesktop : [1440,3],
    itemsDesktopSmall : [1024,3],
    itemsTablet: [768,2],
    itemsTabletSmall: [719,1],
    itemsMobile : [479,1]
});

有人知道错误在哪里吗？

【问题讨论】：

您显示的结果 html 是来自页面页面源代码还是来自浏览器检查器？如果是第二个 - 查看源代码以找出丢失一些关闭 div 的位置
@Anarion 是的，没有未关闭的 div，只是分页内部不好

标签： javascript html wordpress owl-carousel

【解决方案1】：

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

在初始化 Owl carousel 之前，保持您的物品清洁作为基本演示；
您只能自定义项目内容“<h4>number</h4>”；（大多数情况下就足够了）；
关于您的自定义控件，您需要添加“owl-carousel”并添加自定义点击事件。
当你初始化猫头鹰轮播时，猫头鹰帮助你用“owl-item”包裹你的物品，然后用“owl-stage”包裹你的所有物品，然后添加猫头鹰的控制域“owl-controls”，然后包裹“ owl-stage" "owl-controls" 和 "owl-stage-outer";

【讨论】：