Creating a Bootstrap carousel with multiple posts per item in WordPress

The below code generates a Bootstrap carousel with multiple WordPress posts per slide using get_posts() loop. It groups all the posts in group of 4, then generate the slides/items. Check the comments for more information.

<!-- Carousel -->
<div id="promo-carousel" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">

    // Item size (set here the number of posts for each group)
    $i = 4; 

    // Set the arguments for the query
    global $post; 
    $args = array( 
      'numberposts'   => -1, // -1 is for all
      'post_type'     => 'your_post', // or 'post', 'page'
      'orderby'       => 'title', // or 'date', 'rand'
      'order' 	      => 'ASC', // or 'DESC'

    // Get the posts
    $myposts = get_posts($args);

    // If there are posts

      // Groups the posts in groups of $i
      $chunks = array_chunk($myposts, $i);
      $html = "";

       * Item
       * For each group (chunk) it generates an item
      foreach($chunks as $chunk):
        // Sets as 'active' the first item
        ($chunk === reset($chunks)) ? $active = "active" : $active = "";
        $html .= '<div class="item '.$active.'"><div class="container"><div class="row">';

         * Posts inside the current Item
         * For each item it generates the posts HTML
        foreach($chunk as $post):
          $html .= '<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">';
          $html .= get_the_title($post->ID);
          $html .= '</div>';

        $html .= '</div></div></div>';	


      // Prints the HTML
      echo $html;


  </div> <!-- carousel inner -->

  <!-- Controls -->
  <a class="left carousel-control" href="#promo-carousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  <a class="right carousel-control" href="#promo-carousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>

</div> <!-- /carousel -->
  • Goana

    Thanks for the post!!! What about the carousel-indicators div?

    • Maddie Knight

      Thank you so much for posting this!

      Here are the carousel-indicators but it only shows one dot per slide group:


      var myCarousel = jQuery(“.carousel”);
      var indicators = jQuery(“.carousel-indicators”);
      myCarousel.find(“.carousel-inner”).children(“.item”).each(function(index) {
      (index === 0) ?
      indicators.append(“”) :



  • Mk

    Ciao Gianluca, sono riuscito a fare una bella implementazione utilizzando i tuoi suggerimenti qui indicati. Secondo te come potrei risolvere il problema in responsive? sul mobile, tablet ecc.. vengono visualizzati sempre 4 post uno sotto l’altro 🙂

  • Nelly Gretsch

    How would you format the php when using fields from Advanced Custom Fields?

    foreach($chunk as $post):
    $html .= ”;
    $html .= the_field(‘testimonial__feedback’);
    $html .= ”;
    $html .= the_field(‘title’);
    $html .= ”;
    $html .= the_field(‘industry’);
    $html .= ”;

    $html .= ”;

  • how to display image and link over the image ??

  • Rafael

    Thank you so much for this!

    I have a question though. Is it also possible to create this carousel, showing 2 posts at a time, but when clicking the next/prev button only 1 posts renews?

    So, for example;

    You see 2 posts

    Post A
    Post B

    When you click next you see:
    Post B
    Post C


  • Harri Vesanen

    I would like to add a link to the carousel title. How does it succeed?

  • Vedran Sadic

    very nice code. How to get post excerpt under the title? get_the_excerpt($post->ID) not working…


Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow


Developed and designed by Netgloo
© 2019 Netgloo