Two custom post types divided in two columns inside a bootstrap carousel

Question

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?

Answer 1

You 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>