为什么我的 owl 滑块没有出现?
Why doesn't my owl slider shows up?
我在将 owl-slider 与 WordPress 主题集成时遇到问题。滑块应获得最新 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>
尝试像这样将 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);
尝试在 class owl-carousel 上添加 css 方向 ltr
因为旋转木马在 body 方向 rtl
有一个错误
我在将 owl-slider 与 WordPress 主题集成时遇到问题。滑块应获得最新 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>
尝试像这样将 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);
尝试在 class owl-carousel 上添加 css 方向 ltr 因为旋转木马在 body 方向 rtl
有一个错误