Bootstrap Carousel 无法正常工作 - 显示所有元素

Question

我有以下代码：-

        <div id="postCarousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
                <div id="house-type-wrapper">
                    <h2><?php echo the_field('development_title'); ?> House Types</h2>
                    <div id="latest-development">
                        <?php
                        if ( $properties_query->have_posts() ) :
                        $i = 0;
                        while ( $properties_query->have_posts() ) : $properties_query->the_post();
                        $i++;
                        if ( $i == 1 ) {
                            echo '<div class="item active row">';
                        }
                            echo '<div id="column-wrap">';
                            echo '<div class="col-md-4">';
                            $house_type = get_field('housetype')->ID;
                            echo (get_the_post_thumbnail($house_type, 'full')); ?>
                        <div class="house-developments development-details">
                            <h3 class="pull-left"><?php the_title(); ?></h3>
                            <strong><p class="txt-plot pull-right">Plot <?php the_field('plot_no'); ?></p></strong>
                            <div class="clearfix"></div>
                            <p class="txt-description"><?php the_field('short_description', $house_type); ?></p>
                            <h3 class="txt-property-price pull-left">£<?php the_field('price'); ?></h3>
                            <a href="<?php get_post_permalink() ?>"><span class="btn pull-right">Click to View</span></a>
                        </div> 

                        <?php
                        echo '<div class="clearfix"></div>';
                        echo '</div>';


                        if ( $i % 3 == 0 && $i != 8 ) { echo '</div><div class="item">'; }
                        endwhile;
                        echo '</div>';
                        wp_reset_postdata();
                        endif;
                        ?> 
                    </div>
                </div>           
            </div>

        <a class="left carousel-control" href="#postCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#postCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

        </div>

这应该显示一行 3 x col-md-4

目前它正在显示所有 9 个结果，这导致轮播无法运行。

我让它用于以下功能：-

<?php

$args = array( 'posts_per_page' => 12,
               'offset' => 1
);

$the_query = new WP_Query( $args );

if ( $the_query->have_posts() ) :
$i = 0;
while ( $the_query->have_posts() ) : $the_query->the_post();
$i++;
if ( $i == 1 ) {
    echo '<div class="item active row">';
}
    echo '<div id="column-wrap">';
    echo '<div class="col-md-4">';
    echo '<div class="post-carousel"><a href="'.get_post_permalink().'">';
    the_post_thumbnail('medium').'</a>';
    $content = get_the_content();
    echo '<h3><a href="'.get_post_permalink().'">'.get_the_title().'</a></h3>';
    echo '<p>'.wp_trim_words($content, 20).'</p>';
    echo '<span class="post-glyphicon"><a href="'.get_post_permalink().'"><span class="glyphicon glyphicon-chevron-right pull-right"></span></a></span>';
    echo '<div class="clearfix"></div>';
    echo '</div>';
    echo '</div>';
    echo '</div>';

    if ( $i % 3 == 0 && $i != 12 ) { echo '</div><div class="item">'; }
    endwhile;
    echo '</div>';

    wp_reset_postdata();
    endif;
?>

我就是不明白第一个例子有什么问题？有什么想法吗？

Answer 1

最后找到了解决办法，就是放几个div，现在按预期工作了：-

       <div id="developments-carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner">
            <?php
            if ( $properties_query->have_posts() ) :
            $i = 0;
            while ( $properties_query->have_posts() ) : $properties_query->the_post();
            $i++;
            if ( $i == 1 ) {
                echo '<div class="item active">';
            }
                echo '<div id="column-wrap">';
                echo '<div class="col-md-4 row">';
                $house_type = get_field('housetype')->ID;
                $the_price = get_field('price');
                echo (get_the_post_thumbnail($house_type, 'full')); ?>

                <div id="house-type-wrapper" class="marginb30">
                    <div id="latest-development">
                        <div class="house-developments development-details">
                            <h3 class="pull-left"><?php the_title(); ?></h3>
                            <strong><p class="txt-plot pull-right">Plot <?php the_field('plot_no'); ?></p></strong>
                            <div class="clearfix"></div>
                            <p class="txt-description"><?php the_field('short_description', $house_type); ?></p>
                            <h3 class="txt-property-price pull-left">£<?php echo number_format($the_price); ?></h3>
                            <a href="<?php echo get_post_permalink(); ?>"><span class="btn pull-right">Click to View</span></a>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>   
            <?php
            echo '<div class="clearfix"></div>';
            echo '</div>';
            echo '</div>';


            if ( $i % 3 == 0 && $i != 12 ) { echo '</div><div class="item">'; }
            endwhile;
            echo '</div>';
            wp_reset_postdata();
            endif;
            ?> 
            </div>

        <a class="left carousel-control" href="#developments-carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="#developments-carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

        </div>