[英]Why doesn't my owl slider shows up?
I'm having an issue with integrating owl-slider with a WordPress theme. 我在将猫头鹰滑块与WordPress主题集成时遇到问题。 The slider should get the featured image of the latest 4 posts, with the title and a small description.
滑块应该会获得最新的4篇帖子的特色图片,以及标题和简短说明。 The problem is the output
owl-slider
shows up in the inspector but as a white-div and nothing else, 问题是输出
owl-slider
出现在检查器中,但显示为white-div,没有其他显示,
A screenshot of the issue: http://i.imgur.com/jKKt8Qx.png 该问题的屏幕截图: http : //i.imgur.com/jKKt8Qx.png
The code of the loop: 循环代码:
<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>
The function is being called with this code in the footer: 在页脚中使用以下代码调用该函数:
<script>
;(function($){
$("#owl-slider").owlCarousel({
autoPlay: true,
navigation : true, // Show next and prev buttons
slideSpeed : 300,
pagination : false,
singleItem : true
});
})(jQuery);
</script>
Try to wrap the JS code in document.ready like this, maybe it will work as I couldn't find anything that could cause the error. 尝试将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);
尝试在类owl-carousel上添加css direction ltr,因为该carousel在身体方向rtl上有错误
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.