Support

Account

Home Forums Add-ons Repeater Field Active slide issue in repeater?

Solving

Active slide issue in repeater?

  • 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;
    ?>
  • 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>
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.