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();?>