Carousel does not move

Replies: 0

I am trying to build a bootstrap carousel from scratch, similar to this one: https://littleseabear.com

Can someone help me figure out why the row does not work as a carousel. I can’t seem to get further than either displaying a grid, or displaying three items with the 4th hidden. However the indicators do not cause the 4th item to come into view.

My guess is because the “active” class doesn’t change when the prev or next buttons are pressed. If I put “item” class in the else statement, the slides disappear but the “item” class in the if statement breaks it out of the grid (as seen in image 1).

index.php

<?php
$qargs = array(

    'ignore_sticky_posts' => true,
    );
$the_query = new WP_Query( $qargs );

?>
 <?php if ($the_query->have_posts()) : $postCount = 1;  ?>
        <div class="container-fluid">
            <div id="firstcarousel" class="carousel slide" data-ride="carousel" data-interval="9000">
        <div class="carousel-inner row w-10 mxauto " role="listbox">
            
                
                 <?php   
                 while ( $the_query->have_posts() ) :   
                     $the_query->the_post(); 
                     $postCount++; 
               
                if ($postCount === 2){ ?>
        <div class="carousel item carousel-item col-md-4 "> 
               <?php the_post_thumbnail( 'small', ['class' => 'img-fluid mx-auto d-block active', 'title' => 'Feature image']); 
                  ?>
                   <div class="carousel-caption">
                  <h3 ><?php the_title();?></h3>
                    <p><?php the_excerpt();?></p>
                    </div>
                       </div>
                <?php } else { ?>
        <div class="carousel carousel-item col-md-4 "> 
               <?php the_post_thumbnail( 'small', ['class' => 'img-fluid mx-auto d-block ', 'title' => 'Feature image']); 
                ?>
                   <div class="carousel-caption">
                    <h3 ><?php the_title();?></h3>
                    <p><?php the_excerpt();?></p>
                    </div>
                </div>
            <?php } endwhile; ?>
            <?php wp_reset_postdata(); ?>
        </div><!-- .carousel-inner -->
       <a class="left carousel-control" href="#firstcarousel" role="button" data-slide="prev"> 
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only"> Previous</span>
                </a>
                    <a class="right carousel-control" href="#firstcarousel" role="button" data-slide="next"> 
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only"> Next</span>
                </a>
    </div>
    </div>
<?php endif; ?>

without item class
with item class

• This topic was modified 1 hour, 8 minutes ago by littlebear211.