Question

我遇到了将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>

Answer 1

尝试将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);

Answer 2

尝试在类owl-carousel上添加css direction ltr 因为旋转木马在身体方向上有一个错误rtl

Answer 3

包装器元素必须具有类名“ .owl-carousel”。

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

3 个答案: