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.
This carousel works fine with a static ID. As a workaround, for now, I've created duplicate template files with different IDs, not efficient by any means.
<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>