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.