How to solve item active and datasource part in Bootstrap carousal thumbnail for Wordpress?

I just tried to include a bootstrap powered carousal with thumbnail for my product slider. Some how I am able to do that for the main image (big image) but I am not able to fix the issues for thumbnail part.

This is html version which i am trying to change to WordPress
http://codepen.io/RetinaInc/pen/rxksh

The top part is now working so i tried similar approach for thumbnail slider part but couldn’t fix it

<?php get_header();?>
  <div class="container">
  <div class="content">
  <div class="row">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="col-sm-6">
        <div id="carousel" class="carousel slide" data-ride="carousel">
            <div class="carousel-inner ">
      <?php
          $image_args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID,
   'post_mime_type' => 'image',
   'exclude' => $current_featured_image_id,
  );
          $attachments = get_posts( $image_args );
          if ( $attachments ) {
              $i = 1;
              foreach ( $attachments as $attachment ) {?>
                <div class=
                  <?php
                    echo '"';
                    echo 'item '; 
                    if ($i == 1) {
                      echo 'active';
                    }
                    $i++;
                    echo '"';
                    ?>>
                <?php
                    echo wp_get_attachment_image( $attachment->ID, 'image' );
                    ?>
                </div>
                <?php
              }
            }  
      ?>
            </div>
        </div>
        <div class="clearfix">
        <div id="thumbcarousel" class="carousel slide" data-interval="false">
            <div class="carousel-inner">
                <?php
                $thumb_args = array(
   'post_type' => 'attachment',
   'numberposts' => -1,
   'post_status' => null,
   'post_parent' => $post->ID,
   'post_mime_type' => 'image',
   'exclude' => $current_featured_image_id,
  );
                $thumb_attachments = get_posts( $thumb_args );
                 if ( $thumb_attachments ) {
              $i = 1;
              foreach ( $thumb_attachments as $thumbattachment ) {?>
              <?php
                }
                ?>
              <?php
                if (($count % 4) == 0) 
                    {
                ?>
                    <div class=
                    <?php
                    echo '"';
                    echo 'item '; 
                    if ($i == 1) {
                      echo 'active';
                    }
                    $i++;
                    echo '"';
                    ?>> 
                    <?php $count= 1;?>
                    <div data-target="#carousel" data-slide-to="<?php echo $count++; ?>" class="thumb"><img src="img/doubleRound/front_side.JPG" width="100" height="100"></div>
                    <?php $count++;?>
                    </div><!-- /item -->
                <?php
                    }
                ?>
            </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> 
    <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();?>