循环时在Wordpress内部的Bootstrap 3旋转木马中一次显示两个或多个项目



我试图在每个Bootstrap 3旋转木马项目上一次显示两个项目(默认情况下,它只显示一个项目,这是应该的)。这是一个Wordpress网站。

我的数据是在while循环中从数组中提取的。我在一个函数中有我的代码,然后我调用它,并使用Wordpress钩子将其添加到页面的主要部分。

这是我的代码:

function my_boostrap_carousel() 
{
    global $post;
    echo '<div class="carousel-container">
                    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
                        <div class="carousel-inner">'; 
        $args = array( 
                    'post_type' => 'my_custom_post_type',
                    'posts_per_page' => -1 
                );
        $loop = new WP_Query( $args );
        $active_banner = true; 
        $banner_id = 0; 
        while ( $loop->have_posts() ) : $loop->the_post();
            $short_description = get_post_meta($post->ID, '_short_description', true);
            $main_page_show_on_homepage = get_post_meta($post->ID, "_main_page_show_on_homepage", true);
            $main_image = get_post_meta($post->ID, '_main_image', true);
            $active_banner ? $active_class = 'active' : $active_class = '' ;
                echo '<div class="item ' . $active_class  . '">
                    <div class="one-half">';
                if ( $main_image ) { 
                    echo '<img src="' . $main_image . '" alt="My Image" />';
                }
                echo    '<a class="link" href="' . get_permalink() . '" title="' . get_the_title() . '">' . get_the_title() . '</a>
                        <p>' . $short_description . '</p>
                        <a class="btn" href="' . get_permalink() . '" title="' . get_the_title() . '">Learn More</a>
                    </div>
                    </div>';
            $banner_id++;
        endwhile;
        if ( $banner_id != 0 )
                {
                    echo '<a class="carousel-control left large" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                          <a class="carousel-control right large" href="#myCarousel" data-slide="next">&rsaquo;</a>';           
                }
        echo '</div></div></div>';
        /* Restore original Post Data */
        wp_reset_postdata();
}

最终以常规方式使用了引导转盘。

最新更新