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?

  • 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 .= ”;


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


Developed and designed by Netgloo
© 2017 Netgloo