Wordpress Bootstrap Carousel Indicators Not Cycling

Question

I am trying to make a Recent Posts Carousel for Bootstrap. The php seems to be outputting the proper HTML but for some reason the carousel won't cycle.

<div class="col-sm-6 col-md-9">
    <div class="section-title">
        <h1>Most Recent Post</h1>
    </div>
    <?php
        // Get posts (tweak args as needed)
        $i=0;
        $incNum = 0;
        $args = array(
                      'post_type'        => 'post',
                      'posts_per_page'   => 4,
                      'orderby' => "date",
                      'order' => "desc"
                     );
        $posts = get_posts( $args );
    ?>
    <div id="recent-post-carousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <?php foreach (array_chunk($posts, 4, true) as $posts) :  ?>
            <?php echo( '<li data-target="#recent-post-carousel" data-slide-to="'.$incNum.'"'.($incNum == 0 ? 'class="active"':'class').'></li>');
            $incNum++;
            ?>
            <?php endforeach; ?>
        </ol>
        <div class="carousel-inner">
            <?php
                // Get posts (tweak args as needed)
                $i=0;
                $incNum = 0;
                $args = array(
                              'post_type'        => 'post',
                              'posts_per_page'   => -1,
                              'orderby' => "date",
                              'order' => "desc"
                             );
                $posts = get_posts( $args );
            ?>
            <?php foreach (array_chunk($posts, 4, true) as $posts) :  ?>
            <div class="item <?php if ($i==0){echo 'active';}?>">
                <div class="row">
                    <?php foreach( $posts as $post ) : setup_postdata($post); ?>
                    <div class="col-sm-6 post-fix">
                        <div class="single-post ">
                            <div class="pull-left post-image">
                                <a href="#">
                                    <?php the_post_thumbnail( 'full' );  ?>
                                    <i class="fa fa-angle-right"></i>
                                </a>
                            </div>
                            <div class="pull-right post-details">
                                <p class="post-date">03 Dec 2014</p>
                                <p><?php echo $i?></p>
                                <a href="#"><h5><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                            </h5></a>
                            <span>John doe</span>
                            <p><?php echo substr(get_the_excerpt(), 0,99).' [...]'; ?></p>
                        </div>
                    </div>
                </div>
                <?php $i++ ?>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endforeach; ?>

Edit: I updated it now it works, but is there a more efficient way the repeating the get posts twice?

Answer 1

It is not required to loop posts twice, try the following method.

Methods used

wp_get_recent_posts

wp_get_attachment_url

get_post_thumbnail_id

Note: The additional details such as excerpt and date is not added to the slider, add it as per your exact requirement. Use WP Query instead of query_posts for future development.

<div class="container">
    <div id="recent-post-carousel" class="carousel slide" data-ride="carousel">
        <?php
        $args = array(
            'numberposts' => 10,
            'offset' => 0,
            'category' => 0,
            'orderby' => 'post_date',
            'order' => 'DESC',
            'post_type' => 'post',
            'suppress_filters' => true
        );
        $recent_posts = wp_get_recent_posts($args, ARRAY_A);
        // Uncomment the following lines to check output
        // echo "<pre>";
        // print_r($recent_posts);
        $postCount = count($recent_posts);
        foreach ($recent_posts as $recent):
            // Change to get_the_post_thumbnail if you need to get image in certain size
            $imageUri = wp_get_attachment_url(get_post_thumbnail_id($recent['ID']));
            // Check if first iteration
            if ($recent === reset($recent_posts)): ?>
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <?php for ($i = 0; $i <= $postCount - 1; $i++): ?>
                        <li data-target="#recent-post-carousel"
                            data-slide-to="<?php echo $i; ?>" <?php if ($i === 0) echo 'class = "active" '; ?>>
                        </li>
                    <?php endfor; ?>
                </ol>
                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                <?php
            endif; ?>
            <div class="item <?php if ($recent === reset($recent_posts)) echo 'active'; ?>">
                <img src="<?php echo $imageUri; ?>" alt="Chania" width="460" height="345">
            </div>
            <?php
            // Check if last iteration
            if ($recent === end($recent_posts)):
                ?>
                </div>
                <?php
            endif;
        endforeach; ?>
        <!-- Left and right controls -->
        <a class="left carousel-control" href="#recent-post-carousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#recent-post-carousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

I hope this helps.