为什么我的猫头鹰滑块不显示？答案

【问题标题】：Why doesn't my owl slider shows up?为什么我的猫头鹰滑块不显示？
【发布时间】：2015-05-10 18:20:34
【问题描述】：

我在将 owl-slider 与 WordPress 主题集成时遇到问题。滑块应获取最新 4 个帖子的特色图片，带有标题和简短描述。问题是输出 owl-slider 显示在检查器中，但显示为白色 div，没有别的，

问题截图：http://i.imgur.com/jKKt8Qx.png

循环的代码：

<div class="SlideShow">
    <div id="owl-slider" class="owl-carousel owl-theme">
        <?php
        $the_query = new WP_Query( 'posts_per_page=4' );
        while ( $the_query->have_posts() ) : $the_query->the_post();
        ?>
        <div class="item">
            <?php the_post_thumbnail( 'full' ); ?>
            <div class="caption">
                <a href="<?php the_permalink(); ?>">التفاصيل</a><!--More Link-->
                <div class="innercapt">
                    <h1><?php the_title(); ?></h1><!--Title-->
                    <p><?php echo excerpt(9);?></p><!--Description-->
                </div>
            </div>
        </div>
        <?php endwhile;
        // Reset Post Data
        wp_reset_postdata(); ?>
    </div>
</div>

正在使用页脚中的此代码调用函数：

<script>
    ;(function($){
        $("#owl-slider").owlCarousel({
            autoPlay: true,
            navigation : true, // Show next and prev buttons
            slideSpeed : 300,
            pagination : false,
            singleItem : true
        });
    })(jQuery);
</script>

【问题讨论】：

DOM 元素创建完成后需要调用 Owl Carousel 函数，并确保它们没有被隐藏。你是怎么调用 Carousel 函数的？
@brance 更新问题，请检查。
您能否发布一个指向您页面的链接，因为我看不出代码有任何问题。轮播似乎无法正确计算滑块的宽度和高度，但我不能 100% 确定这是否是问题所在。
@brance 这里是 http://4a91238e.ngrok.io/ensan

标签： javascript jquery css wordpress owl-carousel

【解决方案1】：

尝试在 owl-carousel 类上添加 css direction ltr 因为旋转木马在body direction rtl上有一个bug

【讨论】：

【解决方案2】：

尝试像这样将JS代码包装在document.ready中，也许它会起作用，因为我找不到任何可能导致错误的东西。

;(function($){
$(document).ready(function() {
    $("#owl-slider").owlCarousel({
        autoPlay: true,
        navigation : true, // Show next and prev buttons
        slideSpeed : 300,
        pagination : false,
        singleItem : true
    });
});
})(jQuery);

【讨论】：

您能否删除脚本并将 HTML 输出粘贴到 Owl redner 之前？
抱歉，“红人”是什么意思？
对不起，我的意思是删除脚本，这样它就不会创建 Slider，而只会显示图像和文本的 HTML，你现在明白了吗？
刚刚做了，现在检查一下。
如果您的意思是现在检查，该链接将不再有效。