javascript - 为什么我的猫头鹰 slider 不显示?

标签 javascript jquery css wordpress owl-carousel

我在将 owl-slider 与 WordPress 主题集成时遇到问题。 slider 应获得最新 4 篇帖子的特色图片,以及标题和简短描述。问题是输出 owl-slider 出现在检查器中,但显示为 white-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>

最佳答案

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

关于javascript - 为什么我的猫头鹰 slider 不显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30155014/

相关文章:

javascript - 无法调用未获取 page.matches OnSenUi 的函数

javascript - 使导航悬停下划线响应浏览器调整大小

html - 计算div的宽度

javascript - 通过jquery清除cookie?

javascript - 在 Vue 中悬停时向元素添加类,而不使用数据

javascript - Qunit 失败并出现 TypeError : $ is not a function

javascript - 从对象中删除每个条目的键不同的项目

jQuery 动画 CSS,设置悬停状态

jquery - 使用 "circular stacked"元素

jquery - .delegate() 和 .live() 之间的区别