Carousel slider with WP_Query to show 3 posts on each slide

I am trying to create a bootstrap carousel to show 3 posts on each slide. But my code is showing only a single item on each slide.

Here is my code:

            <div class="col-lg-9">
                <div id="popular-services" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <!-- Start Carousel Indicator Loop -->
                        <?php if ( $popular_services->have_posts() ) : while ( $popular_services->have_posts() ) : $popular_services->the_post(); ?>
                        <li data-target="#popular-services" data-slide-to="<?php echo $popular_services->current_post; ?>" class="<?php if ( $popular_services->current_post == 0 ) : ?>active<?php endif; ?> text-primary"></li>
                        <?php endwhile; endif; ?>
                    </ol>
                    <?php rewind_posts(); ?>
                    <div class="carousel-inner" role="listbox"> 
                        <?php if ( $popular_services->have_posts() ) : while ( $popular_services->have_posts() ) : $popular_services->the_post(); ?>
                            <div class="carousel-item <?php if ( $popular_services->current_post == 0 ) : ?>active<?php endif; ?>">
                                <div class="row">
                                    <div class="col-lg-4">
                                        <div class="card">
                                            <?php
                                                if ( has_post_thumbnail() ) {
                                                    echo get_the_post_thumbnail($post->ID, 'thumbnail', array('class' => 'card-img-top') );
                                                }
                                            ?>
                                            <div class="card-body">
                                                <?php echo the_title('<h5 class="card-title">', '</h5>'); ?>
                                                <p class="card-text"><?php echo my_custom_excerpt(20); ?></p> 
                                                <?php echo my_custom_read_more('Learn More'); ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <?php endwhile; endif; ?>       
                    </div>
                </div>
            </div>

What changes do I need to make in order to get it working as per my need.

Thanks in advance.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Despite your question is a generic PHP programming problem, what you’re trying to do can be achieved like so, where the key is the $i which is a custom while counter:

<div class="carousel-inner" role="listbox">
    <?php if ( $popular_services->have_posts() ) :
        $i = 0; // add this counter
        while ( $popular_services->have_posts() ) : $popular_services->the_post();
        ?>
            <?php if ( $i % 3 === 0 ) : ?>
                <div class="carousel-item <?php if ( $popular_services->current_post == 0 ) : ?>active<?php endif; ?>">
                    <div class="row">
            <?php endif; ?>

            <div class="col-lg-4">
                <div class="card">
                    your code here
                </div>
            </div>

            <?php if ( $i % 3 === 2 ) : ?>
                    </div><!-- .row -->
                </div><!-- .carousel-item -->
            <?php endif; ?>
        <?php $i++; // increment the counter
        endwhile;
        ?>
        <!-- This is needed if the (<number of posts> / 3) does not equal to 3. E.g. 11 posts would require 4 rows -->
        <?php if ( $i % 3 !== 0 ) : ?>
                </div><!-- .row -->
            </div><!-- .carousel-item -->
        <?php endif; ?>
    <?php endif; // end have_posts() ?>
</div>

I hope that helps and you’re able to see the $i parts and implement it properly in your code.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0