猫头鹰轮播两排发行 [英] Owl Carousel two rows issue

问题描述

我将Owl Carousel与Wordpress结合使用，并借助WP循环加载动态内容. 这是循环代码:

Im using Owl Carousel with Wordpress and it's loading dynamic content with the help of a WP loop. 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>';
?>

和我的轮播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>，这会导致显示一个空的列而没有任何图像.

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.

我的代码有什么问题?如果有人可以帮助我，那就太好了！

What is wrong in my code? Would be great if anybody could help me out!

谢谢！

推荐答案

您还需要检查它是否是最后一个post，以及是否省略了echo '</div><div class="item-wrapper">';

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">';

类似这样的东西:

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

这篇关于猫头鹰轮播两排发行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！