There’s probably some better way of doing this, but thought i’d give it a go anyways 🙂 – also got some of the answer from here Adding active class to first item
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php
$c = 0;
$class="";
$args = array( 'posts_per_page' => 4);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post );
$c++;
$class = ($c == 1) ? 'active' : '';
?>
<div class="item <?php echo $class; ?>">
<img src="http://placehold.it/1200x440/999999/cccccc">
<div class="carousel-caption">
<?php the_title(); ?>
<p><?php get_the_excerpt(); ?></p>
</div>
</div><!-- End Item -->
<?php
endforeach;
wp_reset_postdata();
?>
</div><!-- End Carousel Inner -->
</div>
<ul class="nav nav-pills nav-justified">
<?php
$c = 0;
$class="";
$i = 0;
$args = array( 'posts_per_page' => 4);
$myposts = get_posts( $args );
foreach ( $myposts as $post ) : setup_postdata( $post );
$c++;
$class = ($c == 1) ? 'active' : '';
?>
<li data-target="#myCarousel" data-slide-to="<?php echo $i++ ?>" class="<?php echo $class; ?>"><a href="#"><?php the_title(); ?></a></li>
<?php
endforeach;
wp_reset_postdata();
?>
</ul>
</div><!-- End Carousel -->
<script>
$(document).ready( function() {
$('#myCarousel').carousel({
interval: 4000
});
var clickEvent = false;
$('#myCarousel').on('click', '.nav a', function() {
clickEvent = true;
$('.nav li').removeClass('active');
$(this).parent().addClass('active');
}).on('slid.bs.carousel', function(e) {
if(!clickEvent) {
var count = $('.nav').children().length -1;
var current = $('.nav li.active');
current.removeClass('active').next().addClass('active');
var id = parseInt(current.data('slide-to'));
if(count == id) {
$('.nav li').first().addClass('active');
}
}
clickEvent = false;
});
});
</script>