UPDATE: Bootstrap Carousel = WordPress Dynamic Content

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">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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">‹</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">›</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

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

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

 

37 Responses to “UPDATE: Bootstrap Carousel = WordPress Dynamic Content”

  • Dave says: Apr 29, 2013 at 11:51 am

    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.

    • doug says: Apr 29, 2013 at 12:14 pm

      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!

      • Dave says: May 1, 2013 at 6:15 am

        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.

        • Jed says: Dec 11, 2014 at 10:40 am

          Hey Dave is right---needs to be a semicolon. Great stuff Doug thanks again man

  • Vanina says: May 21, 2013 at 9:58 am

    hm, there is still a mistake in the PHP somewhere around the first 4 lines. The whole website breaks.

    • Dave says: Jun 17, 2013 at 8:22 am

      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?

      • doug says: Jun 17, 2013 at 8:44 am

        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.

  • Hendrikx Benny says: Jul 17, 2013 at 1:53 am

    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="">

    • doug says: Jul 17, 2013 at 7:09 am

      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"?...

      • Hendrikx Benny says: Jul 17, 2013 at 8:13 am

        indeed had some js issues ...

  • Johan says: Jul 26, 2013 at 12:38 am

    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?

    • Doug says: Oct 1, 2013 at 9:25 am

      Sorry to say, I'm not sure how to answer your question. Please be sure to follow the steps on the original post.

  • Victor says: Sep 23, 2013 at 6:08 am

    i think is missing . my only problem is not loading the image.

  • Victor says: Sep 23, 2013 at 4:20 pm

    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?

    • Doug says: Oct 1, 2013 at 9:26 am

      Sorry to say, I'm not sure how to answer your question. Please be sure to follow the steps on the original post

  • wpdev says: Oct 1, 2013 at 10:34 pm

    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)

    • Doug says: Oct 2, 2013 at 9:47 am

      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...

  • Ben B says: Oct 30, 2013 at 1:26 pm

    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.

  • Sameer Hamid says: Jan 7, 2014 at 2:59 am

    Thanks for this I'm able to convert this slider in wordpress http://wowslider.com/css-slideshow-studio-fade.html <img src="ID), array( ), false, '' ); echo $src[0]; ?>" > <li data-target="#carousel-example-generic" data-slide-to="" style="background-image:url(ID), array( ), false, '' ); echo $src[0]; ?>);width:148px;"> jQuery(document).ready(function(){ $(".carousel-inner .item:first").addClass("active"); }); Thank You

  • Fernando says: Mar 6, 2014 at 6:28 pm

    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.

    • Fernando says: Mar 7, 2014 at 6:36 am

      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.

  • Carlos Ruiz says: Apr 17, 2014 at 12:59 pm

    Thanks for posting this!

  • toby powell says: Apr 27, 2014 at 7:45 pm

    Thanks, you just got me unstuck on a project :)

  • Fernando says: May 8, 2014 at 5:48 pm

    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?

  • Miles says: Jun 29, 2014 at 9:21 pm

    Great post, really appreciate you taking the time to put this together.

  • kamran says: Sep 2, 2014 at 9:27 am

    what is i want 4 columns to show on each item ?

  • kamran says: Sep 2, 2014 at 9:40 am

    i need realy your help please do reply me i will be waiting for your help thanks

  • cagri says: Dec 8, 2014 at 4:27 am

    Thanks for posting this

  • Jed says: Dec 11, 2014 at 10:14 am

    Hey Just saw this thanks a ton.

  • Adding more than 10 Position Indicators to WordPress Dynamic Bootstrap v3.2.0 Carousel says: Feb 25, 2015 at 4:50 pm

    […] Can’t seem to wrap my brain around this one. I have created a Photo Carousel loosely based on this tutorial. […]

  • Adding more than 10 Position Indicators to WordPress Dynamic Bootstrap v3.2.0 Carousel | 我爱源码网 says: Feb 25, 2015 at 5:08 pm

    […] Can't seem to wrap my brain around this one. I have created a Photo Carousel loosely based on this tutorial. […]

  • Adding more than 10 Position Indicators to WordPress Dynamic Bootstrap v3.2.0 Carousel - Technology says: Feb 27, 2015 at 10:21 pm

    […] Can’t seem to wrap my brain around this one. I have created a Photo Carousel loosely based on this tutorial. […]

  • Andreson says: Mar 2, 2015 at 7:56 pm

    Tks! Perfect.

  • Henning Fischer says: Jun 17, 2015 at 2:24 am

    THX a lot, helped me a lot - this is how i made it with a repeater field in an options page: http://codepen.io/herrfischer/pen/mJMvrJ

  • Adding more than 10 Position Indicators to WordPress Dynamic Bootstrap v3.2.0 Carousel - Tech Magazine says: Oct 27, 2015 at 4:45 am

    […] Can’t seem to wrap my brain around this one. I have created a Photo Carousel loosely based on this tutorial. […]

  • The Steg says: Feb 22, 2016 at 8:30 am

    How do i get only 4 posts in the carousel? post_per_page=4 doesn't work.

    • axel says: Mar 27, 2016 at 12:04 pm

      This is postS_per_page, with an S.

 
Leave a Comment
User

Mail

Globe

Comment