[英]Owl Carousel two rows issue
Im using Owl Carousel with Wordpress and it's loading dynamic content with the help of a WP loop. 我将Owl Carousel与Wordpress结合使用,并借助WP循环加载动态内容。 Here is the loop code: 这是循环代码:
<?php
$args = array(
'post_type' => 'properties',
'posts_per_page' => -1,
'paged' => $paged
);
$the_query = new WP_Query($args);
?>
<?php
$i = 1;
//added before to ensure it gets opened
echo '<div class="item-wrapper">';
if (have_posts()):
while ($the_query->have_posts()):
$the_query->the_post();
?>
<div class="item">
<img class="img-responsive img-rounded" src="<?php the_field('property_foto');?>" alt="AWF Property Example" />
</div>
<?php
if ($i % 2 == 0) {
echo '</div><div class="item-wrapper">';
} // if multiple of 3 close div and open a new div
$i++;
endwhile;
endif;
//make sure open div is closed
echo '</div>';
?>
and my JS for the Carousel: 和我的轮播JS:
$(document).ready(function(){
$("#owl-properties").owlCarousel({
nav: true,
pagination: true,
loop: true,
dots: false,
autoplay: false,
autoplayTimeout:2000,
autoplayHoverPause:true,
navText: [
"<span class='glyphicon glyphicon-chevron-left'></span>",
"<span class='glyphicon glyphicon-chevron-right'></span>"
],
margin:10,
responsiveClass:true,
responsive:{
0:{
items:2,
},
450:{
items:3,
},
767:{
items:4,
},
991:{
items:5,
},
1199:{
items:5,
}
}
});
});
I've added some code to the loop in order to echo div's every two items, this way I create two rows. 我在循环中添加了一些代码,以便回显div的每两个项目,这样我就创建了两行。 However, at the end of all the items, it spits out an empty <div class="item-wrapper"></div>
which causes to display an empty column without any images. 但是,在所有项目的末尾,它会吐出一个空的<div class="item-wrapper"></div>
,这会导致显示一个空列而没有任何图像。
What is wrong in my code? 我的代码有什么问题? Would be great if anybody could help me out! 如果有人可以帮助我,那就太好了!
Thanks! 谢谢!
You need to also do a check for if it's the last post
and if it is omit the adding of echo '</div><div class="item-wrapper">';
您还需要检查它是否是最后一个post
以及是否省略echo '</div><div class="item-wrapper">';
Something like this: 像这样:
if ($i % 2 == 0 && ($the_query->found_posts != $i)) {
echo '</div><div class="item-wrapper">';
} // if multiple of 3 close div and open a new div
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.