Question

我试图在每个Bootstrap 3 Carousel项目上一次显示两个项目（默认情况下，它只显示一个项目，因为它应该）。这是一个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();
}

Answer 1

定期使用Bootstrap轮播。

在循环中的Wordpress内的Bootstrap 3 Carousel中一次显示两个或更多项目

1 个答案: