I recently attempted to incorporate a bootstrap-powered carousel with thumbnails into my product slider. I managed to get it working for the main image (large image), but ran into issues when trying to resolve problems with the thumbnail section.
Here is the HTML version that I am attempting to convert to Wordpress: http://codepen.io/RetinaInc/pen/rxksh
The top part is functioning correctly, so I tried a similar approach for the thumbnail slider component but was unable to fix it. When running the code below as-is, it results in syntax errors, so removing the thumbnail part and replacing it with HTML allows the main slider to function. However, my goal is to have the thumbnail slider work alongside 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 get_footer();?>