Twitter bootstrap carousel multiple items in carousel

Question

I'm pulling in posts from a specific category using twitter bootstrap carousel rotator. I've looking into double loops but I can't figure out how to implement it.

Here is my loop:

$query = array( 'posts_per_page' => 4, 'cat' => 3);
                    $queryObject = new WP_Query($query);
                    $count = 0;
                        if($queryObject):
                            while($queryObject->have_posts() ) : $queryObject->the_post();
                        $count++;

Pretty much it pulls in 4 posts(which I currently have up) from category 3

<div class="item <?php if($count === 1){
                        echo " active";
                    }elseif($count >=4){
                        echo " ";
                    } ?>"> 
                        <div class="span4">
                        <?php the_content();?>
                        </div><!--end of span4-->
                    </div>

What I'm trying to do is repeat the div element <div class="span4">, so essentially something like this. Originally what I have above with the if else statement I got <div class="item"> to have the class active on the first three post and on the fourth post just have nothing. With that it just wasn't rotating, so I'm trying this option.

<div class="item active">
<div class="span4"><?php the content();?></div>
<div class="span4"><?php the content();?></div>
<div class="span4"><?php the content();?></div>

EDIT: For some reason my code is being trimmed off.

I've tried experimenting with the double loop feature but it's not working as I want it too,maybe my logic is off, but with the double loop there's an offset which I don't want. Any suggestion would be nice.

Pastebin.

Thanks.

Answer 1

The best solution is create a function that create the output. In addiction this gives more flexibility using function options.

The code, tested, is here:

<?php
function wp_bootstrap_carousel($args = '', $visible = 3, $active = 0) {
// cannot show more than 12 items at once
if ( ! intval($visible) || $visible > 12 ) return false;
  $query = new WP_Query($args);
  if ($query->have_posts() ) {
  $i = -1;
  $output = '';
      // calculate the span class depending on desired visible items
  $span = floor(12 / $visible);
     // if 12 is not a perfect multiple of visible items, calculate the residue 
  $span_residue = 12%$visible; 
  $slides = 0;
  while ( $query->have_posts() ) :
    $i++;
    $query->the_post();
        // set active only the desired active item
    $item_class = $i == $active ? 'item active' : 'item'; 
    $u = ( ($i == 0) || $i % ($visible) == 0 ) ? 0 : $u+1;
    if ( $u == 0 ) {
      $slides ++;
          // open item div if needed
      $output .= sprintf('<div class="%s">', $item_class);
    }
        $output .= sprintf('<div class="span%d">%s</div>', $span, get_the_title() );
        // close item div if needed
    if ( $u == ($visible-1) || $i == ($query->post_count-1) ) { 
      // when on last post we always need to close the current item div,
      // if total is not divisible by visible we insert a "fake" item
      if ( $u != ($visible-1) ) $span_residue += ( ($visible-1) - $u ) * $span;
      if ( $span_residue > 0 ) {
             $output .= sprintf('<div class="span%d">&nbsp;</div>', $span_residue);
          }
      $output .= '</div>';
    }
  endwhile;
  return array('items' => $output, 'total' => $query->post_count, 'slides' => $slides);
}
return false;
}


// query  args
$args = array(
  'posts_per_page' => -1,
  'cat' => 3
);

$active = 0; // the slide first visible
$carousel = wp_bootstrap_carousel($args, 5, $active);

if ( is_array($carousel) &&  $carousel['total'] > 0 ) :
?>

<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
  <?php for ($i = 0; $i < $carousel['slides']; $i++ ) : ?>
    <li data-target="#myCarousel" data-slide-to="<?php echo $i; ?>"<?php if ($i==$active) { ?> class="active"<?php } ?>></li>
  <?php endfor; ?>
  </ol>
  <!-- Carousel items -->
  <div class="carousel-inner">
    <?php echo $carousel['items'];  ?>
  </div>
</div>

<?php endif; ?>