WordPress and the Twitter Bootstrap Carousel

how to make it work.

I’ve been using Twitter Bootstrap as the starting block for a site redesign and wanted to incorporate the Carousel on the front page to cycle through last five news posts.

The problem arises with the fact that the code used for the Carousel isn’t set up to handle the dynamic output of the WordPress loop.



<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item"> 1st news item here </div>
    <div class="item"> 2nd news item here </div>
    <div class="item"> 3rd news item here </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>


The first item div needs the class active but with a dynamic WordPress loop that’s not immediately possible.



<div id="slider-id" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
<?php
$args = array(all the custom loop args here);
$my_query = new WP_Query($args);
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID; ?>

    <div class="item">
    <?php get_template_part( 'content', get_post_format() );?>
    </div><!-- /.item -->
  <?php endwhile; ?>
  </div><!-- /.carousel-inner  -->
  <!-- Carousel nav -->
  <a class="btn btn-orange carousel-controls carousel-control-left" href="#news-slider" data-slide="prev">‹</a>
  <a class="btn btn-orange carousel-controls carousel-control-right" href="#news-slider" data-slide="next">›</a>
</div><!-- /#slider-id  -->


Add that and nothing shows up because the Boostrap CSS file has…



.carousel .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  -moz-transition: 0.6s ease-in-out left;
  -o-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}


…so all the posts are hidden.

So a quick look round some sites found through a “WordPress Twitter Carousel” Google search finds some answers.

First up is a plugin. Now I don’t really want to use a plugin, try not to use too many, especially for things I think can be done without resorting to one.

Only other solution seems to be using two custom loops, inside the carousel-inner div. The first has the active class added to the item div and the loop $args is set for just one post 'posts_per_page' => 1. The second loop uses 'offset' => 1 $arg so that it doesn’t show the post called in the first loop and then the number of posts you want to show minus one, so in my case 4 as I wanted a total of 5 'posts_per_page' => 4.

It works but two loops just seems like a touch of overkill and it adds more queries on the database which I prefer to keep as low as possible.

There was other php based methods of figuring out which was the first post and adding the active class to it but another thing jumped out during the search. The Carousel wasn’t automatically cycling through the items for people.

To start it going you need to add the following bit of JavaScript after plugin…



$('.carousel').carousel({
  interval: 2000
})


…with the interval set at what ever speed you want. Which all got me thinking, the whole thing is based on using JavaScript so why not just use that very same thing, through jQuery, to add the active class to the first item.

Number of ways you can do it…



$(".carousel-inner").first().addClass('active');

$(".carousel-inner .item:first").addClass('active');

$(".carousel-inner .item:first-child").addClass('active');

$(".carousel-inner>:first-child").addClass('active');


Haven’t checked them on all different browsers, especially not the old Internet Explorers, some might not make work with them, though I’ll probably only be checking 8 and above – 6 and 7 are dead to me.

You’ll just have to add some CSS for users that have JavaScript switched off in their browsers. Assuming you use no-js class in the <html lang="en" class="no-js"> tag.



.no-js .carousel .item {display: block;}


Leave a Reply

Your email address will not be published.

Required fields *

This site uses Akismet to reduce spam. Learn how your comment data is processed.