Adding class \'active\' to a repeater.

• Tierney

• March 20, 2015 at 9:49 am

Hi there,

I was wondering could anyone help me.

I have created a carousel slider with the images being taken in via repeater fields. When the image is ‘active’ I need to put have a class around the active image. I need this because when the active image is being shown, I need text to be shown along with it. The other images on the carousel will not be shown.

Any help would be much appreciated!
Thanks,
Tiarnan

<div class="quote-section">
	<div class="slider4">
		<?php if( have_rows('quote_slider') ): 
		     while ( have_rows('quote_slider') ) : the_row(); ?> 	
			<li class="slide"> 
	 		    <div class="quote"><?php the_sub_field('quote'); ?></div>
	 		   <div class="name"><?php the_sub_field('name'); ?></div>
	 		   <div class="image"><img src="<?php the_sub_field('image'); ?>" /></div>
	 		</li> 	
	 	   <?php endwhile;
		else : endif; ?>
	</div>
</div>

• mediawerk

• March 23, 2015 at 6:00 pm

what is your goal?

• to start slider with a active class around a image?
• add active class based on what image is shown?

first should be possible with php without big problems. use something like that:

<div class="quote-section">
	<div class="slider4">
		<?php if( have_rows('quote_slider') ):
$img_count=1; 
		     while ( have_rows('quote_slider') ) : the_row();
if ($img_count == 1) {
 ?>
			<li class="slide active"> 
	 		    <div class="quote"><?php the_sub_field('quote'); ?></div>
	 		   <div class="name"><?php the_sub_field('name'); ?></div>
	 		   <div class="image"><img src="<?php the_sub_field('image'); ?>" /></div>
	 		</li>
<?php } else {?> 	
			<li class="slide"> 
	 		    <div class="quote"><?php the_sub_field('quote'); ?></div>
	 		   <div class="name"><?php the_sub_field('name'); ?></div>
	 		   <div class="image"><img src="<?php the_sub_field('image'); ?>" /></div>
	 		</li>
<?php } 
$img_count++; ?> 	
	 	   <?php endwhile;
		else : endif; ?>
	</div>
</div>

second is/shouldbe part of your slider js, and there i could not help you

• anwar

• October 18, 2018 at 8:33 am

Great…!!! Works like a Charm..Thanks