Carousel with wordpress loop in columns

Question

Hello, I’m trying to adjust my Carousel so that it has a grid done by loop, I have the following wordpress code:

<?php 
global $posts; 
$b = 0;
$args = array( 'post_type' => 'banner', 'posts_per_page' => 5 );
$loop = new WP_Query( $args );
?>
<div id="carousel-front-page" data-ride="carousel" class="carousel slide">
	<div class="carousel-inner">
		<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
			<div class="item <?php if (0 == $b) {echo "active";} ?>">
				<?php the_content() ?>
			</div>
			<?php $b++ ?>
		<?php endwhile ?>
	</div>
	<a class="left carousel-control" href="#carousel-front-page" data-slide="prev">
		<span class="icon-prev"></span>
	</a>
	<a class="right carousel-control" href="#carousel-front-page" data-slide="next">
		<span class="icon-next"></span>
	</a>
</div>

Works normally with wordpress post type loop, but I’m now trying to do the same, only with a grid of col-Md-3 for example, with loop leaving 4 posts starting, and then go for four more. And I’m not getting a loop out of it at all, I don’t know where I’m going wrong, I know that no loop is easy to make.

I did something on top of it, but I’m sinning on something:

<?php 
$per_page = 5;
$n=0;
$args = array( 'post_type' => 'meusprodutos', 'posts_per_page' => $per_page );
$loop = new WP_Query( $args );
if($loop->have_posts()):  
  ?>
<div class="carousel-loja">
 
   <div id="shopCarousel" class="carousel slide">
    <div class="ponteiros">
      <ol class="carousel-indicators">
        <?php  while($loop->have_posts()): $loop->the_post(); ?>
          <li data-target="#shopCarousel" data-slide-to="<?php echo $n++; ?>"></li>
        <?php endwhile; ?>
      </ol>
    </div><!--ponteiros-->

    <!-- Carousel items --> 
    <div class="carousel-inner">
    
     <div class="row">

      <?php  while($loop->have_posts()): $loop->the_post(); ?>
      
      	<div class="col-md-4">   
      <div class="item <?php if (0 == $n) {echo "active";} ?>">
       
            <h4><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h4>

      </div><?php $n++ ?>
      </div>
    <?php endwhile; ?>
    
    
    </div>
    
  </div>

</div>
</div>
<?php 
endif; 
wp_reset_query(); 
?>

Someone can help me?

Answer 1

Taking the code you showed me you’re using as your example:

http://bootsnipp.com/snippets/featured/infinite-carousel-loop

The main code is this:

<div class="item active">
  <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
  <a href="#"><img src="http://lorempixel.com/400/200/sports" class="img-responsive">1</a></div>
</div>

I think the loop you’re using is good, although I don’t know if the_content() even contains an image or not.

Plus, make sure your CSS has it:

.carousel-inner .active.left { left: -33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev        { left: -33%; }
.carousel-control.left,.carousel-control.right {background-image:none;}
.item:not(.prev) {visibility: visible;}
.item.right:not(.prev) {visibility: hidden;}
.rightest{ visibility: visible;}

And in your Javascript, have this:

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));

  if (next.next().length>0) {

      next.next().children(':first-child').clone().appendTo($(this)).addClass('rightest');

  }
  else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));

  }
});

Note: I got these codes straight from the sample site you sent

If you already have all this and it’s still not working, try some photos of the rendered results, and include the Javascript and CSS that you have, and any errors that are in the site console or in PHP.