javascript 猫头鹰旋转木马两行问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25154151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Owl Carousel two rows issue
提问by Boris Kamp
Im using Owl Carousel with Wordpress and it's loading dynamic content with the help of a WP loop. Here is the loop code:
我在 Wordpress 中使用 Owl Carousel，它在 WP 循环的帮助下加载动态内容。这是循环代码：
<?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. 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，这样我就创建了两行。但是，在所有项目的末尾，它会吐出一个空白<div class="item-wrapper"></div>，导致显示一个没有任何图像的空列。
What is wrong in my code? Would be great if anybody could help me out!
我的代码有什么问题？如果有人可以帮助我，那就太好了！
Thanks!
谢谢！
采纳答案by Rob Schmuecker
You need to also do a check for if it's the last postand 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
