Question

我正在使用带有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>';
?>

和我的旋转木马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

猫头鹰轮播两排问题

1 个答案: