bootstrap carousel to show content gallery in wordpress active and show all posts

Question

today created content-gallery.php file in my theme to show content galley in galley post formats i used bootstrap3 carousel to show galleries in slideshow format in this code when i use active class the all photos shown in carousel but when i not use active class do not show any photos in carousel

i want treat this problem by showing first photo then by clicking on rows show me other photos

or i want the foreach loop only active first photo not all photos

<figure class="item active">
<?php echo wp_get_attachment_image( $the_bootstrap_image->ID, array( 719, 400 ) ); 
if ( has_excerpt( $the_bootstrap_image->ID ) ) :?>
<figcaption class="carousel-caption">

this is the full code within my content-gallery.php

<?php 
/*
==============================================================================
Template For Standard post
===============================================================================
*/
?>

<div class="post-area">
<h1>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h1>
<table class="table table-condensed table-striped table-bordered">
<tbody>
<td class="category"><span class="glyphicon glyphicon-tag"></span> 
<?php  the_category('&nbsp; / &nbsp;'); ?></td>
<td><span class="glyphicon glyphicon-user"></span> <?php the_author_posts_link(); ?>
</td>
<td>
<span class="glyphicon glyphicon-time"></span> 
<?php the_date(get_option('date-  format')); ?></td>
<td><span class="glyphicon glyphicon-comment"></span> 
<a href="<?php comments_link(); ? >">
<?php comments_number('0', '1', '%'); ?></a> Comments</td>
<td><span class="glyphicon glyphicon-eye-open"></span>
<?php echo  getPostViews(get_the_ID()); ?></td>
</tbody>
</table>

 <?php

 $the_bootstrap_images = get_children( array(
'post_type'     => 'attachment',
'post_mime_type'=> 'image',
'orderby'       => 'menu_order',
'order'         => 'ASC',
'numberposts'   => 999
) );
if ( !empty($the_bootstrap_images) ) {
$the_bootstrap_total_images =   count( $the_bootstrap_images );

?>

<div>
<p class="gallery-meta">
<em>
<?php
printf(_n( 'This gallery contains <strong>%1$s photo</strong>.', 'This gallery contains
<strong>
%1$s photos</strong>.', $the_bootstrap_total_images, 'the-bootstrap' ),
number_format_i18n( $the_bootstrap_total_images )
); ?>
</em>
</p>
</div>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<!-- Carousel items -->
<div class="carousel-inner">

<?php foreach ( $the_bootstrap_images as $the_bootstrap_image ) : ?>
<figure class="item">
<?php echo wp_get_attachment_image( $the_bootstrap_image->ID, array( 719, 400 ) ); 
if ( has_excerpt( $the_bootstrap_image->ID ) ) :?>
<figcaption class="carousel-caption">
<h4><?php echo get_the_title( $the_bootstrap_image->ID ); ?></h4>
<p>
<?php echo apply_filters( 'get_the_excerpt', $the_bootstrap_image->post_excerpt ); ?>
</p>
</figcaption>
<?php endif; ?>
</figure>
<?php endforeach; ?>

</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>

<?php } ?>
</div>

Answer 1

I solved my problem by adding this jQuery code

<script>
jQuery(document).ready(function(){
    $(".carousel-inner .item:first").addClass("active");
});
</script>

Answer 2

I've came across the same problem recently. The easiest (non Javascript) Solution for me was a small counter.

Basically you simply run a counter inside your foreach loop and then print out the string "active" for the first item. See comments below.

<?php $counter = 0; //before the foreach loop ?>

<?php foreach ( $the_bootstrap_images as $the_bootstrap_image ) : ?> 
<?php $counter++; // increment the counter by 1 each loop ?>

<figure class="item <?php if($counter == 1 ) { echo 'active'; // echo active only for the first item } ?>">
<?php // Your code continues here just as before ?>

Edit: Didn't notice the date before. But this might help someone else regardless.