How to solve item active and datasource part in Bo

Question

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 running the code below as it is gives syntax error so remove thumbnail part and replace it with html then main slider works. but i want the thumbnail slider to work with 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();?>

Answer 1

Your code will work if you do it in simpler manner as wingskush have suggested with addition of another variable.

after

$thumb_attachments = get_posts( $thumb_args );

do

if ( $thumb_attachments  ) {
$j = 1; $count = 0;

after

foreach ( $thumb_attachments as $thumbattachment ) {?>

use

if (($count % 4) == 0) 
 {                             
  if ($j == 1) {

           echo '<div class="item active">';
             }
             else
             {
            echo '</div><!-- /item --><div class="item">';
              }
             $j++;

      ?>

This worked when i tried.