Active slide issue in repeater?

• marcolepsi

• November 1, 2022 at 7:01 am

The first slide appears as the active slide. When I add the corresponding repeater code, the slide is broken. How can I set the first slide as the active slide?

<?php
    if( have_rows('slides', 'option') ):
        while( have_rows('slides', 'option') ): the_row();
        $image = get_sub_field('image', 'option');
        $title = get_sub_field('title', 'option');
?>

<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>
<?php echo $title; ?>

<?php
endwhile;
?>
<?php
else :?>
no rows found
<?php
endif;
?>

• marcolepsi

• November 1, 2022 at 8:09 am

More detailed code;

<div class="u-clearfix u-sheet u-sheet-1">
                <div id="carousel-bd35" data-interval="5000" data-u-ride="false" class="u-carousel u-carousel-fade u-expanded-width u-slider u-slider-1">
                    <ol class="u-absolute-hcenter u-carousel-indicators u-hidden u-carousel-indicators-1">
                        <li data-u-target="#carousel-bd35" class="u-active u-grey-30" data-u-slide-to="0"></li>
                        <li data-u-target="#carousel-bd35" class="u-grey-30" data-u-slide-to="1"></li>
                    </ol>
                    <div class="u-carousel-inner" role="listbox">
                    <?php
                    if( have_rows('slides', 'option') ):
                        while( have_rows('slides', 'option') ): the_row(); 
                        $image = get_sub_field('image', 'option');
                        $title = get_sub_field('title', 'option');
                    ?>
                        <div class="u-active u-align-left u-carousel-item u-container-style u-image u-shading u-slide u-image-1" data-animation-name="" data-animation-duration="0" data-animation-delay="0" data-animation-direction="" data-image-width="1200" data-image-height="675">
                            <div class="u-container-layout u-container-layout-1">
                                <img class="u-expanded-height u-hover-feature u-image u-image-default u-image-2" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>/images/black-widow-character-guide.jpg" alt="" data-image-width="1400" data-image-height="700">
                                <h3 class="u-text u-text-default-xl u-text-1" data-lang-tr="Design Online " data-lang-ena="Design Online "><?php echo $title; ?></h3>
                                <p class="u-text u-text-2" data-lang-tr="Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id suscipit ex. Suspendisse rhoncus laoreet purus <a href=&quot;https://website.com&quot; class=&quot;u-border-1 u-border-grey-75 u-border-hover-palette-1-base u-border-no-left u-border-no-right u-border-no-top u-btn u-button-style u-none u-text-body-color u-block-control u-btn-1&quot; style=&quot;border-style: solid; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0&quot; data-block=&quot;21&quot;>quis elementum</a>. Phasellus sed efficitur dolor, et ultricies sapien. Quisque fringilla sit amet dolor commodo efficitur.
                Aliquam et sem odio. In ullamcorper nisi nunc, et molestie ipsum iaculis sit amet. 
        " data-lang-ena="Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id suscipit ex. Suspendisse rhoncus laoreet purus <a href=&quot;https://website.com&quot; class=&quot;u-border-1 u-border-grey-75 u-border-hover-palette-1-base u-border-no-left u-border-no-right u-border-no-top u-btn u-button-style u-none u-text-body-color u-block-control u-btn-1&quot; style=&quot;border-style: solid; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0&quot; data-block=&quot;21&quot; data-lang-tr=&quot;{&quot;content&quot;:&quot;quis elementum&quot;,&quot;href&quot;:&quot;https://website.com&quot;}&quot;>quis elementum</a>. Phasellus sed efficitur dolor, et ultricies sapien. Quisque fringilla sit amet dolor commodo efficitur.
                Aliquam et sem odio. In ullamcorper nisi nunc, et molestie ipsum iaculis sit amet. 
        "><?php _e( 'Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id suscipit ex. Suspendisse rhoncus laoreet purus', 'movly' ); ?> <a href="https://website.com" class="u-border-1 u-border-grey-75 u-border-hover-palette-1-base u-border-no-left u-border-no-right u-border-no-top u-btn u-button-style u-none u-text-body-color u-btn-1"><?php _e( 'quis elementum', 'movly' ); ?></a><?php _e( '. Phasellus sed efficitur dolor, et ultricies sapien. Quisque fringilla sit amet dolor commodo efficitur.', 'movly' ); ?> <?php _e( 'Aliquam et sem odio. In ullamcorper nisi nunc, et molestie ipsum iaculis sit amet.', 'movly' ); ?>  </p>
                                <a href="https://website.com/website-design" class="u-align-center u-border-none u-btn u-button-style u-hover-feature u-palette-3-base u-text-hover-white u-btn-2" data-lang-tr="{&quot;content&quot;:&quot;Buton&quot;,&quot;href&quot;:&quot;https://website.com/website-design&quot;}" data-lang-ena="{&quot;content&quot;:&quot;Buton&quot;,&quot;href&quot;:&quot;https://website.com/website-design&quot;}"><?php _e( 'Buton', 'movly' ); ?></a>
                            </div>
                            <style data-mode="XL" data-visited="true"></style>
                            <style data-mode="LG" data-visited="true"></style>
                            <style data-mode="MD" data-visited="true"></style>
                            <style data-mode="SM" data-visited="true"></style>
                            <style data-mode="XS" data-visited="true"></style>
                        </div>
                        <?php
                    endwhile;
                    ?>
                    <?php
                    else :?>
                    no rows found
                    <?php
                    endif;
                    ?>
                        <div class="u-align-left u-carousel-item u-container-style u-image u-shading u-slide u-image-3" data-animation-name="" data-animation-duration="0" data-animation-delay="0" data-animation-direction="" data-image-width="1200" data-image-height="675">
                            <div class="u-container-layout u-container-layout-2">
                                <img class="u-expanded-height u-hover-feature u-image u-image-default u-image-4" src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/black-widow-character-guide.jpg" alt="" data-image-width="1400" data-image-height="700">
                                <h3 class="u-text u-text-default-xl u-text-3" data-lang-tr="Design Online " data-lang-ena="Design Online "><?php _e( 'Black Widow', 'movly' ); ?></h3>
                                <p class="u-text u-text-4" data-lang-tr="Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id suscipit ex. Suspendisse rhoncus laoreet purus <a href=&quot;https://website.com&quot; class=&quot;u-border-1 u-border-grey-75 u-border-hover-palette-1-base u-border-no-left u-border-no-right u-border-no-top u-btn u-button-style u-none u-text-body-color u-block-control u-btn-1&quot; style=&quot;border-style: solid; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0&quot; data-block=&quot;21&quot;>quis elementum</a>. Phasellus sed efficitur dolor, et ultricies sapien. Quisque fringilla sit amet dolor commodo efficitur.
                Aliquam et sem odio. In ullamcorper nisi nunc, et molestie ipsum iaculis sit amet. 
        " data-lang-ena="Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id suscipit ex. Suspendisse rhoncus laoreet purus <a href=&quot;https://website.com&quot; class=&quot;u-border-1 u-border-grey-75 u-border-hover-palette-1-base u-border-no-left u-border-no-right u-border-no-top u-btn u-button-style u-none u-text-body-color u-block-control u-btn-1&quot; style=&quot;border-style: solid; padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0&quot; data-block=&quot;21&quot; data-lang-tr=&quot;{&quot;content&quot;:&quot;quis elementum&quot;,&quot;href&quot;:&quot;https://website.com&quot;}&quot;>quis elementum</a>. Phasellus sed efficitur dolor, et ultricies sapien. Quisque fringilla sit amet dolor commodo efficitur.
                Aliquam et sem odio. In ullamcorper nisi nunc, et molestie ipsum iaculis sit amet. 
        "><?php _e( 'Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id suscipit ex. Suspendisse rhoncus laoreet purus', 'movly' ); ?> <a href="https://website.com" class="u-border-1 u-border-grey-75 u-border-hover-palette-1-base u-border-no-left u-border-no-right u-border-no-top u-btn u-button-style u-none u-text-body-color u-btn-3"><?php _e( 'quis elementum', 'movly' ); ?></a><?php _e( '. Phasellus sed efficitur dolor, et ultricies sapien. Quisque fringilla sit amet dolor commodo efficitur.', 'movly' ); ?> <?php _e( 'Aliquam et sem odio. In ullamcorper nisi nunc, et molestie ipsum iaculis sit amet.', 'movly' ); ?>  </p>
                                <a href="https://website.com/website-design" class="u-align-center u-border-none u-btn u-button-style u-hover-feature u-palette-3-base u-text-hover-white u-btn-4" data-lang-tr="{&quot;content&quot;:&quot;Buton&quot;,&quot;href&quot;:&quot;https://website.com/website-design&quot;}" data-lang-ena="{&quot;content&quot;:&quot;Buton&quot;,&quot;href&quot;:&quot;https://website.com/website-design&quot;}"><?php _e( 'Buton', 'movly' ); ?></a>
                            </div>
                            <style data-mode="XL" data-visited="true"></style>
                            <style data-mode="LG" data-visited="true"></style>
                            <style data-mode="MD" data-visited="true"></style>
                            <style data-mode="SM" data-visited="true"></style>
                            <style data-mode="XS" data-visited="true"></style>
                        </div>
                    </div>