Skip to main content
3 of 4
added 211 characters in body

ACF Flexible Content with Bootstrap Carousel Repeater

I'm trying to add a counter for each instance of this flexible content carousel built with Bootstrap. I've tried multiple ways of counting with the while statement. What would be the correct way to count so I can add a unique ID to each carousel?

This version doesn't output anything. Moving the while statement above breaks page. Not wrapping the while counts nothing. I've tested counter on while( have_rows('slides') ), works, but not what's needed here.

<div id="work" class="oc-content-container">
                <?php 
                if( have_rows('work_flexible_fields') ):
                while ( have_rows('work_flexible_fields') ) : the_row();
                if( get_row_layout() == 'content_editor' ): the_sub_field('content_editor'); 

                elseif ( get_row_layout() == 'carousel_1' ):
                $cCounter = 1; //start counter
                ?>
                <section id="carousel" class="text-center center-block">

                    <?php while ( have_rows('carousel_1') ) { $cCounter++; //attempt to count instances of this flexible content module
                        if( have_rows('slides') ) { 
                            $num = 0;
                            $active = 'active'; ?>  

                    <div id="carouselId<?php echo $cCounter; ?>" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            
                    <?php 
                            while( have_rows('slides') ) : the_row(); ?>
                            <li data-target="#carouselId<?php echo $cCounter; ?>" data-slide-to="<?php echo $num; ?>" class="<?php echo $active; ?>"></li>

                    <?php 
                            $num++;
                            $active = '';   
                           endwhile; ?>
                        </ol>
                        <div class="carousel-inner">

                        <?php $active = 'active'; ?>

                    <?php while( have_rows('slides') ) : the_row();

                            $image      = get_sub_field('image');
                            $mainText   = get_sub_field('main_text');
                            $subText    = get_sub_field('sub_text');
                            ?>
                            
                            <div class="carousel-item <?php echo $active; ?>">
                                <img class="center-block" src="<?php echo $image; ?>" />
                                <div class="carousel-caption d-none d-block">
                                    <h5><?php echo $mainText; ?></h5>
                                </div>
                            </div>
                            
                            <?php 
                            $active = ''; 
                            endwhile; ?>
                            
                        </div>
                    </div>
                    <?php } } //close while statement ?> 
                </section>

                <?php endif;
                endwhile;
                else :
                endif;
                ?>
            </div>