Wordpress Bootstrap Carousel Indicators Not Cycling - php

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>
<h5><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?>
</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.