Im trying to use the Bootstrap carousel to show some custom posts in my page, something like in the image below
But right now, my carousel only show the same post twice, like the image below
Heres my code:
<?php $args = array('post_type' => 'cases', 'order' => 'DESC', 'orderby' => 'date', 'posts_per_page' => '-1');
$the_query = new WP_Query( $args );
if( $the_query->have_posts() ):?>
<?php $index = 0; ?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<article class="container">
<div class="row">
<div class="carousel-inner">
<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item<?php if ($index == 1) { echo ' active'; } ?>">
<div class="col-md-6">
<?php
$imagem_personalizada = get_field('capa_da_pagina_do_case');
$thumb_capa = wp_get_attachment_image_src($imagem_personalizada, 'capaIdeia');
?>
<a href="<?php the_permalink(); ?>" style="text-decoration: none;">
<br>
<div id="secao-titulo-ideia-single" class="nopadding">
<img class="img-responsive center-block" src="<?php echo $thumb_capa[0]; ?>" alt="Thumb Post" width="100%">
<h2 class="brandonregular titulo-ideia-single text-center"> <?php the_field('titulo_do_case'); ?> </h2>
</div>
</a>
</div>
<div class="col-md-6">
<a href="<?php the_permalink(); ?>" style="text-decoration: none;">
<div class="nopadding">
<img class="img-responsive center-block" src="<?php echo $thumb_capa[0]; ?>" alt="Thumb Post" width="100%">
<h2 class="brandonregular"> <?php the_field('titulo_do_case'); ?> </h2>
</div>
</a>
</div>
</div>
<?php $index++; ?>
<?php endwhile; ?>
</div>
</div>
</article>
</div>
<?php endif; ?>
<?php wp_reset_query(); wp_reset_postdata(); ?>
I don't know why is this happenning, I've tried many diferent things, but I can't find a way to solve this.
What am I doing wrong?
Im trying to use the Bootstrap carousel to show some custom posts in my page, something like in the image below
But right now, my carousel only show the same post twice, like the image below
Heres my code:
<?php $args = array('post_type' => 'cases', 'order' => 'DESC', 'orderby' => 'date', 'posts_per_page' => '-1');
$the_query = new WP_Query( $args );
if( $the_query->have_posts() ):?>
<?php $index = 0; ?>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<article class="container">
<div class="row">
<div class="carousel-inner">
<?php while( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item<?php if ($index == 1) { echo ' active'; } ?>">
<div class="col-md-6">
<?php
$imagem_personalizada = get_field('capa_da_pagina_do_case');
$thumb_capa = wp_get_attachment_image_src($imagem_personalizada, 'capaIdeia');
?>
<a href="<?php the_permalink(); ?>" style="text-decoration: none;">
<br>
<div id="secao-titulo-ideia-single" class="nopadding">
<img class="img-responsive center-block" src="<?php echo $thumb_capa[0]; ?>" alt="Thumb Post" width="100%">
<h2 class="brandonregular titulo-ideia-single text-center"> <?php the_field('titulo_do_case'); ?> </h2>
</div>
</a>
</div>
<div class="col-md-6">
<a href="<?php the_permalink(); ?>" style="text-decoration: none;">
<div class="nopadding">
<img class="img-responsive center-block" src="<?php echo $thumb_capa[0]; ?>" alt="Thumb Post" width="100%">
<h2 class="brandonregular"> <?php the_field('titulo_do_case'); ?> </h2>
</div>
</a>
</div>
</div>
<?php $index++; ?>
<?php endwhile; ?>
</div>
</div>
</article>
</div>
<?php endif; ?>
<?php wp_reset_query(); wp_reset_postdata(); ?>
I don't know why is this happenning, I've tried many diferent things, but I can't find a way to solve this.
What am I doing wrong?
Share Improve this question edited May 11, 2017 at 19:03 Tom J Nowell♦ 61.2k7 gold badges79 silver badges150 bronze badges asked May 11, 2017 at 18:49 Rafael DantasRafael Dantas 11 silver badge1 bronze badge 4- 1 You're displaying the same post twice every iteration of the loop! There'll be 2,2,3,3,4,4 etc rather than 2,3,4,5. Perhaps you've muddled up slides and posts? – Tom J Nowell ♦ Commented May 11, 2017 at 19:06
- Hi Tom! Thanks for the comment. I noticed that now, but I don't know how to change that, perhaps I should create one loop for each column? – Rafael Dantas Commented May 11, 2017 at 19:13
- 2 You don't need two loops. Outside your loop, put the carousel container divs/tags. Then do a foreach loop inside, so you only output individual slide divs/tags during the loop, Then once you end the loop, add the closing carousel container divs/tags. – WebElaine Commented May 11, 2017 at 20:53
- @WebElaine I tried to use the answer from Picard and it worked really well for me, but anyway, thanks for your tip. Now I understand what I was doing wrong. – Rafael Dantas Commented May 12, 2017 at 12:56
1 Answer
Reset to default 1You could try something like this.
The idea is to check within the loop if the item is even or odd, and for the odd item you open the two-item-slide (display the opening HTML), where for the even you close it.
I haven't tested it but the idea is like this:
<article class="container">
<div class="row">
<div class="carousel-inner">
<?php
$cnt = 1;
while( $the_query->have_posts() ) : $the_query->the_post(); ?>
<!-- code for the first item in slide -->
<?PHP if ($cnt % 2): ?>
<div class="item<?php if ($cnt == 1) { echo ' active'; } ?>">
<?PHP endif; ?>
<div class="col-md-6">
<?php
$imagem_personalizada = get_field('capa_da_pagina_do_case');
$thumb_capa = wp_get_attachment_image_src($imagem_personalizada, 'capaIdeia');
?>
<a href="<?php the_permalink(); ?>" style="text-decoration: none;">
<br>
<!-- code for the first item in slide -->
<?PHP if ($cnt % 2): ?>
<div id="secao-titulo-ideia-single" class="nopadding">
<!-- code for the second item in slide -->
<?PHP else: ?>
<div class="nopadding">
<?PHP endif; ?>
<img class="img-responsive center-block" src="<?php echo $thumb_capa[0]; ?>" alt="Thumb Post" width="100%">
<!-- code for the first item in slide -->
<?PHP if ($cnt % 2): ?>
<h2 class="brandonregular titulo-ideia-single text-center"> <?php the_field('titulo_do_case'); ?> </h2>
<!-- code for the second item in slide -->
<?PHP else: ?>
<h2 class="brandonregular"> <?php the_field('titulo_do_case'); ?> </h2>
<?PHP endif; ?>
</div>
</a>
</div>
<!-- code for the second item in slide -->
<?PHP if (!($cnt % 2)): ?>
</div>
<?PHP endif; ?>
<?php $cnt++; ?>
<?php endwhile; ?>
<!-- code for closing the slide if only one item in the last slide -->
<?PHP if (!($cnt % 2)): ?>
</div>
<?PHP endif; ?>
</div>
</div>
</article>