猫头鹰旋转木马两行问题(Owl Carousel two rows issue)

即时通讯使用猫头鹰旋转木马与Wordpress和它的加载与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>';
?>

我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,
            }
        } 
    });
});

我已经添加了一些代码回路为了呼应div的每两个项目，这样一来我创建两行。 然而，在所有项目的结尾，它吐出一个空<div class="item-wrapper"></div>这会导致没有任何要显示的图像的空栏。

什么是错在我的代码？ 将是巨大的，如果有人可以帮助我！

谢谢！

Answer 1:

你需要同时做检查，如果它是最后一个post ，如果是省略的加入echo '</div><div class="item-wrapper">';

事情是这样的：

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

文章来源: Owl Carousel two rows issue