How to add active class dynamically

**I use this code but not working **

<div class="row">
        <!-- Featured Post Area -->
        <div class="col-12">
            <div class="featured-post-area">
                <div id="featured-post-slides" class="carousel slide d-flex flex-wrap" data-ride="carousel">
                    <div class="carousel-inner">
                        <?php 
                            $feuted_post_slider = new WP_Query( array(
                                'post_type'         => 'post',
                                'posts_per_page'    => 5,
                                'order'             => 'ASC',
                                // 'meta_key'          => 'featured_post',
                                // 'meta_value'        => 'on'
                            ) );
                            // need a variable for active class
                            $i = 1;
                        ?>
                        <?php if( $feuted_post_slider->have_posts() ) : ?>
                            <?php while( $feuted_post_slider->have_posts() ) : $feuted_post_slider->the_post(); 
                            
                            $featured_img_id    = get_post_thumbnail_id( get_the_ID() );
                            $featured_img       = wp_get_attachment_image_src( $featured_img_id , 'full' );
                            ?>
                                <div class="carousel-item <?php if ( $i == 1 ) : echo 'active'; endif; ?> bg-img" style="background-image: url(<?php echo $featured_img[0]; ?>)">
                                    <!-- Featured Post Content -->
                                    <div class="featured-post-content">
                                        <p><?php the_time( 'M d, Y' ); ?> / 
                                            <?php 
                                                $categoris = get_the_category();
                                                $separator = ', ';
                                                $output    = '';
    
                                                if( $categoris ){
                                                    foreach( $categoris as $category ){
                                                        $output .= '<a href="' . get_category_link( $category->term_id ) . '">' . $category->cat_name .'</a>' . $separator;
                                                    }
                                                    echo trim( $output , $separator );
                                                }
                                            ?>
                                            <!-- end category here -->
                                        </p>
                                        <a href="<?php the_permalink(); ?>" class="post-title">
                                            <h2><?php the_title(); ?></h2>
                                        </a>
                                    </div>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; wp_reset_postdata(); ?>
    
                        <!-- end post slider here -->
                    </div>
    
                    <ol class="carousel-indicators">
                        <?php 
                        $post_num = 1;
                        $slider_data_value = 0;
                        $count = 0;                           
                        if( $feuted_post_slider->have_posts() ) : ?>
                            <?php while( $feuted_post_slider->have_posts() ) : $feuted_post_slider->the_post(); ?>
                                <li data-target="#featured-post-slides" data-slide-to="<?php echo $slider_data_value++; ?>" class="<?php 
                                    if($count==0){
                                        echo "active";  
                                      }
                                      else{
                                          echo " ";
                                      }
                                ?>">
                                    <h2><?php echo $post_num++; ?></h2>
                                    <a href="<?php the_permalink(); ?>" class="post-title">
                                    <h5><?php the_title(); ?></h5>
                                    </a>
                                </li>
                            <?php endwhile; ?>
                        <?php endif; wp_reset_postdata(); ?>
    
                    </ol>
                
                </div>
            </div>
        </div>
    </div>

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

You should change $i == 1 to $i++ == 1

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