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();?>
Read more here: How to fix issues with active class for building custom Bootstrap carousal for WordPress