UPDATE: Bootstrap Carousel = WordPress Dynamic Content

Doug Support 37 Comments

This is an update to my original post How to make Bootstrap Carousel display WordPress Dynamic Content, so I’ll keep it short…

The Original Source Code

From Twitter.Github.com/bootstrap


<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">…</div>
    <div class="item">…</div>
    <div class="item">…</div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

Note: Bootstrap developers have added the .carousel-indicators feature sometime after my original post. Below, you will see my solution for generating the “data-slide-to” values dynamically…

Now with WordPress template PHP for dynamic content


<?php 
 $number = 0; 
 query_posts('category_name=your-cat-slug'); 
 if(have_posts()):  
?>
<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <?php while(have_posts()): the_post(); ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $number++; ?>"></li>
    <?php endwhile; ?>
  </ol>

  <!-- Carousel items -->
  <div class="carousel-inner">
    <?php while(have_posts()): the_post(); ?>
    <div class="item">
      <?php the_post_thumbnail('large'); ?>
      <div class="carousel-caption">
        <h4><?php the_title(); ?></h4>
        <?php the_excerpt(); ?>
      </div>
    </div>
    <?php endwhile; ?>
  </div>

  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>
<?php endif; wp_reset_query(); ?>

Of course you’re free to pass all sorts of arguments within the query_posts('/*your_arguments*/');. I’ve left out “posts_per_page” this time, allowing the default to be whatever you have for Dashboard Settings > Reading > Blog pages show at most = “?” posts.
Note: I’ve removed .active from the .carousel-indicators li, as well as from the .carousel-inner .item. We’ll add it back with jQuery…

Add “active” Class to first items


&lt;script&gt;
jQuery(document).ready(function(){
  $(".carousel-indicators li:first").addClass("active");
  $(".carousel-inner .item:first").addClass("active");
});
&lt;/script&gt;

The script must be called after the bootstrap js file, and preferably this is all happening in the footer.

Comments 37

  1. This does not work at all for me. Your old post for adding bootstrap-carousel without the indicator worked fine for me but something does not work here and causes this section and anything below it not to load. It will load the rest of the page if I remove the PHP queries.

    1. Post
      Author

      I sincerely apologize! I had a number of typos – obviously an epic proof-reading fail. Try it now. I’ve updated the post, and the query loop is even a little cleaner. Thanks so much for bringing this to my attention!

      1. Everything is good except you put a colon after “if(have_posts())” rather than a semi-colon which is causes the PHP not to work.

    1. There is an extra Apostrophe you need to delete in the category slug for your category? like so: query_posts(‘category_name=Slideshow’);

      Is that the issue you were having?

      1. Post
        Author

        That’s the ticket! Truly sorry. I removed the extra apostrophe. The colon after the “if” works for me, though, btw. Not a semi-colon.

  2. Seems i can not get it to work ,
    it loads only the images, all listed down do i need to aply some extra css
    or am i missing something ?
    Cheers

    <li data-target="#myCarousel" data-slide-to="”>



    1. Post
      Author

      I suspect a js file or two aren’t being read. I’ve come to find out the “$” in javascript doesn’t always work in WordPress, – something to do with no-conflict mode. Try replacing the “$” with “jQuery”?…

  3. Hi, I have a similar setup but using foreach loops in php, but for some reason it only displays the active slide only in the first round as soon as it goes to round 2 and so it the active class does not get added anymore to the indicators, any ideas?

    1. Post
      Author
  4. not really sure if my previous comment was received or i just forgot to submit it. anyway, like reiterate that i think the closing tag of is missing. the script is actually working but loading the images… any luck guys?

    1. Post
      Author
  5. In the posted code, there seams to be a missing in ‘carousel-inner’ section.

    Also, it could be worth explaining where the script should be place (usually in the footer.php)

    1. Post
      Author

      I see now – it was missing the closing div tag for “carousel-caption”. I’ll edit the post & it will be like it never happened…

  6. Works great – you do have to edit the jQuery line from
    jQuery(document).ready(function()
    to
    jQuery(document).ready(function($)

    but apart from that it works out of the box and saved me a load of time! I’m working on an amended version using the Advanced Custom Fields plugin so the user can add an optional image or title if they want to use that instead of the default the_thumbnail() or the_title() one.

  7. I don´t know if you still read the comments for this post, but i have the next problem. I copy/paste the code and don´t show me anything. But in the source code the carousel it create ok. Here the code created for the carousel:
    ————————-



    ———————————-
    I don´t know wheres the problem,. But the carousel is not showing.

    Thanks a lot.

    PD: Sorry for my english.

    1. I can make it working well,. I don´t know exactly what I did.
      This is the script in the footer

      jQuery(‘#myCarousel2’).ready(function($){
      $(“.carousel-indicators li:first”).addClass(“active”);
      $(“.carousel-inner .item:first”).addClass(“active”);
      $(“.carousel-inner .item img”).addClass(“img-responsive”); //for responsive images
      });

      Thanks a lot for this script, it save me a lot of time.

  8. I´ll try to use two carousel with this metod in the same page,. but it doesn´t work,.. just work the first carousel, the second not work at all.

    Someone has tried to do this?

  9. Pingback: Adding more than 10 Position Indicators to WordPress Dynamic Bootstrap v3.2.0 Carousel

  10. Pingback: Adding more than 10 Position Indicators to WordPress Dynamic Bootstrap v3.2.0 Carousel | 我爱源码网

  11. Pingback: Adding more than 10 Position Indicators to WordPress Dynamic Bootstrap v3.2.0 Carousel - Technology

  12. Pingback: Adding more than 10 Position Indicators to WordPress Dynamic Bootstrap v3.2.0 Carousel - Tech Magazine

Leave a Reply

Your email address will not be published. Required fields are marked *