Support

Account

Home Forums Add-ons Repeater Field Adding class \'active\' to a repeater.

Solving

Adding class \'active\' to a repeater.

  • 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>
  • 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

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.