Carousel with wordpress loop in columns

Question

Carousel with wordpress loop in columns

Navigation

#1 by (0 votes)

1

Hello, I'm trying to fit my carousel so that it has a grid made 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>

It works normally with wordpress post type loop, but I'm now trying to do the same thing, only with a col-md-3 grid for example, with loop leaving 4 start posts, and then go for more four. And I can not really do a loop in this, I do not know where I'm going wrong, I know that without a loop it's easy to do.

I did something about it, but I'm sinning at 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(); 
?>

Can anyone help me?

jquery twitter-bootstrap wordpress carousel

asked by anonymous 20.07.2015 / 23:39

1 answer

make a redirect from a sub-domain to main domain Error instantiating 2 objects with doctrine entities (setter)

score 0 · Accepted Answer

Picking up the code you showed me you're using as your example:

link

The primary 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 do not know if the_content() contains an image or not.

Emotion of this, make sure your CSS has this:

.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 took these codes directly from the example site you sent to

If you already have all this and it still does not work, try for some photos of the rendered results, and include the JavaScript and CSS you have, and any errors found in the site console or PHP.