I have integarted bootstrap carousel into my wordpress. The slides will be taken from the posts which will be tagged as “featured” so only 5 recently enter “featured” posts will be shown.
Below is my code:
<div id="carousel-captions" class="carousel slide bs-docs-carousel hidden-xs">
<ol class="carousel-indicators">
<li data-target="#carousel-captions" data-slide-to="0" class="active"></li>
<li data-target="#carousel-captions" data-slide-to="1" class=""></li>
<li data-target="#carousel-captions" data-slide-to="2" class=""></li>
<li data-target="#carousel-captions" data-slide-to="3" class=""></li>
<li data-target="#carousel-captions" data-slide-to="4" class=""></li>
</ol>
<div class="carousel-inner">
<?php $the_query = new WP_Query( 'tag=featured&orderby=date&posts_per_page=5' ); ?>
<?php if ( $the_query->have_posts() ) : ?>
<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item">
<a href="<?php the_permalink() ?>">
<img src="<?php the_field('header_banner', $post_id); ?>" alt="">
<div class="carousel-caption">
<h3><?php the_field('year', $post_id); ?></h3><span class="name">Make<br><?php $category = get_the_category(); echo $category[0]->cat_name; ?></span><hr>
<p><?php the_field('mileage', $post_id); ?> Miles | <?php the_field('exterior_color', $post_id); ?> Color<br><br><?php echo homepage_carousel_excerpt(15); ?></p><span class="btn btn-default">Details →</span>
</div></a>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php else: ?>
<p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
</div>
<a class="left carousel-control" href="#carousel-captions" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-captions" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
The problem is It doesn’t slide because the “active” class is not working statically.
HOw do I fix this?
Thanks
To avoid having to query twice, you can set a variable set to 1 outside your loop. In the loop, you add the “active” class when it’s equal to 1, then you increment it.
This is the solution I came up with:
I learnt this by watching the following video: Integrating the Bootstrap Carousel into the WordPress theme by user Ezer Sanbe. All credits to him.
The youtube video or the channel for this user are no longer available, sorry
Hope this helps
Limit the first query to 1 post. In that first loop, set the carousel item class to active. Reset the query and run a second loop, offset by one, and negate the active class, like so:
Bootstrap 3 with custom post type (here named “diapositives”):
Integrating Bootstrap carousel in WordPress without plugin