first post in while loop of wordpress

Question

I am trying to create a bootstrap carousel in WordPress using advanced custom fields.

The first 'carousel-item' in the loop must have class 'active'. I am not able to figure out how to define the if condition so that the class is added to the first iteration of the loop.

Same is the case with the carousel indicators. class active should be added to the first iteration and data-slide-to="x" should be the counter of the loop. Any idea how to get the count and class working?

<section>
    <div id="theCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
        <ol class="carousel-indicators">
            <li data-target="#theCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#theCarousel" data-slide-to="1"></li>
            <li data-target="#theCarousel" data-slide-to="2"></li>
        </ol>

        <div class="carousel-inner" role="listbox">
            <?php $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
            <?php while( $loop->have_posts() ): $loop->the_post(); ?>
                <div class="carousel-item" style="background-image: url('<?php the_field('carousel_image'); ?>')">
                    <div class="carousel-caption d-none d-md-block">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field('carousel_description'); ?></p>
                    </div>
                </div>
            <?php endwhile; wp_reset_query();?>
        </div>

        <a class="carousel-control-prev" href="#theCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#theCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

Answer 1

You can do it this way

      <div class="carousel-inner" role="listbox">
            <?php 
            $iteration = 0;
            $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
            <?php while( $loop->have_posts() ): $loop->the_post(); $iteration++; ?>
                <div class="carousel-item<?php if( $iteration == 1 ) echo ' active' ?>" style="background-image: url('<?php the_field('carousel_image'); ?>')" data-slide-to="<?php echo $iteration ?>">
                    <div class="carousel-caption d-none d-md-block">
                        <h3><?php the_title(); ?></h3>
                        <p><?php the_field('carousel_description'); ?></p>
                    </div>
                </div>
            <?php endwhile; wp_reset_query();?>
        </div>

        <a class="carousel-control-prev" href="#theCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#theCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>

Answer 2

Here's how I implemented it. Defined two variables. One for the carousel indicator, and one for the carousel wrapper and increment them in the loop.

$carousel_wrap = 0; $carousel_ind = 0;

<section>
        <div id="theCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
            <ol class="carousel-indicators">
                <?php $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
                <?php while( $loop->have_posts() ): $loop->the_post(); $carousel_ind++; ?>
                    <li data-target="#theCarousel" data-slide-to="<?php echo $carousel_ind; ?>" class="<?php if( $carousel_ind == 1 ) echo 'active' ?>""></li>
                <?php endwhile; wp_reset_query();?>
            </ol>

            <div class="carousel-inner" role="listbox">
                <?php $loop = new WP_Query( array ( 'post_type' => 'carousel', 'orderby' => 'post_id', 'order' => 'ASC') ); ?>
                <?php while( $loop->have_posts() ): $loop->the_post(); $carousel_wrap++; ?>
                    <div class="carousel-item <?php if( $carousel_wrap == 1 ) echo 'active' ?>" style="background-image: url('<?php the_field('carousel_image'); ?>')">
                        <div class="carousel-caption d-none d-md-block">
                            <h3><?php the_title(); ?></h3>
                            <p><?php the_field('carousel_description'); ?></p>
                        </div>
                    </div>
                <?php endwhile; wp_reset_query();?>
            </div>

            <a class="carousel-control-prev" href="#theCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#theCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>

Answer 3

Use for loop for that.

for ( $iteration = 0; $the_query->have_posts(); $iteration++  ) : $the_query->the_post(); 
endfor;