How to fix issues with active class for building custom Bootstrap carousal for Wordpress

I am trying to get a bootstrap carousal with thumbnail slider work with wordpress and look like in this bootstrap example http://codepen.io/RetinaInc/pen/rxksh
The carousal and its thumbnail should be the images uploaded for current product posting using a simple custom post type named product

The main issue I am having is with item active class that is needed which is making trouble to get it using foreach loop.

I even tried wp-bootstrap-plugin but that work as i desired but the slider look is not what i wanted.

I have tried several ways , all present in following code from single.product.php file. But failed to make it work as i desire.

<?php get_header();?>
  <div class="container">
  <div class="content">
  <div class="row">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php
    $args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID
  );
    $attachments = get_posts( $args );
     if ( $attachments ) {
        foreach ( $attachments as $attachment ) {
           echo '<li>';
           the_attachment_link( $attachment->ID, true );
           echo '<p>';
           echo '<li>';
           echo '<p>';
           echo apply_filters( 'the_title', $attachment->post_title );
           echo '</p></li>';
          }
     }
     $attachments = get_posts( $args );?>
     <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner ">
            <?php
            $i = 1;
     if ( $attachments ) {
        foreach ( $attachments as $attachment ) {;?>
                <div class="item <?php if ($i == 1) echo 'active'; ?>">
                <?php the_attachment_link( $attachment->ID, true );?>
                </div>
           <?php
           echo '<p>';
           echo apply_filters( 'the_title', $attachment->post_title );
           echo '</p>';
          }
     }
?>
     </div></div></div>
<?php
$post_type = 'product';
global $wpdb;
$where = get_posts_by_author_sql( $post_type );
$query = "SELECT * FROM $wpdb->posts p where p.post_type = 'attachment' AND (p.post_mime_type LIKE 'image/%')  AND (p.post_status = 'inherit') AND p.post_parent IN (SELECT $wpdb->posts.ID FROM $wpdb->posts  {$where} ) ORDER BY p.post_date DESC";
$results =  $wpdb->get_results( $query );
if ( $results ) {
  foreach ( (array) $results as $image ) {
    $url = get_attachment_link($image->post_parent);
    $thumb = wp_get_attachment_thumb_url( $image->ID );
    $alt = get_post_meta($image->ID, '_wp_attachment_image_alt', true);
    echo '<li><a href="' . $url . '"><img src="' . $thumb . '" alt="' . $alt . '" /></a></li>';
    echo '<p>';
           echo apply_filters( 'the_title', $attachment->post_title );
           echo '</p></li>';
  }
}
?>
    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner ">
                <div class="item active ">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
                <div class="item ">
                    <img class="image" src="img/doubleRound/top.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/bottom.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front_side.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/front.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
                <div class="item">
                    <img class="image" src="img/doubleRound/all-parts.JPG">
                </div>
            </div>
        </div> 
    <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">
                <div class="item active">
                    <div data-target="#carousel" data-slide-to="0" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="1" class="thumb"><img src="img/doubleRound/top.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="2" class="thumb"><img src="img/doubleRound/bottom.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="3" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
                </div><!-- /item -->
                <div class="item">
                    <div data-target="#carousel" data-slide-to="4" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="5" class="thumb"><img src="img/doubleRound/front.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="6" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                    <div data-target="#carousel" data-slide-to="7" class="thumb"><img src="img/doubleRound/all-parts.JPG" width="100" height="100"></div>
                </div><!-- /item -->
            </div><!-- /carousel-inner -->
            <a class="left carousel-control" href="#thumbcarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a class="right carousel-control" href="#thumbcarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
        </div> <!-- /thumbcarousel -->
    </div><!-- /clearfix -->
    </div> <!-- /col-sm-6 -->
    <div class="col-sm-6">
        <h2>Products</h2>
             <h3><?php the_title_attribute(); ?>: </h3>
        <p><?php the_content(); ?></p>
    </div> <!-- /col-sm-6 -->
            <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
  </div> <!-- /row -->
  </div>
</div> <!-- /container -->
<?php get_footer();?>