enter image description here

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?

Read more here: Two custom post types divided in two columns inside a bootstrap carousel


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: