Add class to first row of repeater

• Varilux2k

• July 5, 2020 at 5:36 am

Hello community,

I’m trying to implement acf into a working html slider. The Code is the following:

<div id="testim" class="testim">
	<div class="wrap">
		<span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
		<span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
		<ul id="testim-dots" class="dots">
			<li class="dot active"></li><!--
				--><li class="dot"></li><!--
				--><li class="dot"></li>
		</ul>
		<div id="testim-content" class="cont">
			<div class="active">
				<div class="img">
					<img src="http://localhost/friedhofsverwaltung/wp-content/uploads/testimonial.jpg" alt="">
				</div>
				<h4>Example 1</h4>
				<h2>lorem Ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
			</div>
			<div>
				<div class="img">
					<img src="http://localhost/friedhofsverwaltung/wp-content/uploads/testimonial.jpg" alt="">
				</div>
				<h4>Example 2</h4>
				<h2>lorem Ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>                    
			</div>
			<div>
				<div class="img">
					<img src="http://localhost/friedhofsverwaltung/wp-content/uploads/testimonial.jpg" alt="">
				</div>
				<h4>Example 3</h4>
				<h2>lorem Ipsum</h2>
				<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
			</div>
		</div>
	</div>
</div>

A javascript is running in the background that the active class always passes to the next slider content. I try to implement my acf code, but I have the problem, that the class=”active” will not be passed on to the next slider content. My code:

<div id="testim" class="testim">
	<div class="wrap">
		<span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
		<span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
		<ul id="testim-dots" class="dots">
			<li class="dot active"></li><!--
				--><li class="dot"></li><!--
				--><li class="dot"></li>
		</ul>
		<div id="testim-content" class="cont">
				<?php if( have_rows('testimonial') ):?>
					<?php while( have_rows('testimonial') ) : the_row();

						$image = get_sub_field('image');
						$name = get_sub_field('name');
						$friedhof = get_sub_field('friedhof');
						$kommentar = get_sub_field('kommentar');
					?>
					<div class="active">
						<div class="img">
							<?php $image = get_sub_field('bild');
								if( !empty( $image ) ): ?>
									<img class="img-fluid mx-auto d-block" src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
							<?php endif; ?>
						</div>
						<?php if( get_sub_field('name') ): ?>
							<h4><?php the_sub_field('name'); ?></h4>
						<?php endif; ?>
						<?php if( get_sub_field('friedhof') ): ?>
							<h2><?php the_sub_field('friedhof'); ?></h2>
						<?php endif; ?>
						<?php if( get_sub_field('kommentar') ): ?>
							<p><?php the_sub_field('kommentar'); ?></p>
						<?php endif; ?>
					</div>
			<?php endwhile; ?>
				<?php endif; ?>
		</div>
	</div>
</div>

If I understand it correctly, the first slider must be given the active class. Not everyone else. This is the job of javascript. How can I pass the active class to the first slide in the repetition?

I am very grateful for your help.

• vipstephan

• July 7, 2020 at 5:59 am

I’m a friend of semantic HTML and progressive enhancement, and that means that something should work at least in a basic way without JavaScript in the first place, and then it should be enhanced with JS. That means, by default, the testimonials could be displayed below one another, and the whole “slider” and “active class” and “pagination” thing would be created with JS, so ACF has nothing to do with any of that.

These empty spans and list with “dots” have nothing to do in there, this should be generated by JS. Since WordPress works with jQuery by default you could use a jQuery slider plugin such as Cycle; this will generate all the functionality you need.