Home › Forums › General Issues › Relationship carousel with $i counter
Hi all,
I’m hoping that someone can point me to where i’m going wrong.
I have a loop which is using a relationship field within a page (so that the admin can choose which items to show), and I want it to show in a carousel.
I have this working with a standard loop, but its not working with a foreach loop that i’m using for the selected items.
Can anyone help me work this out?
<section class="testimonials" style="background:<?php the_field('testimonials_background_colour');?>">
<div class="casestudyblock">
<?php if( get_field('testimonials_title') ): ?><h2 class="testimonialstitle"><?php the_field ('testimonials_title');?></h2><?php endif; ?>
<div class="slider">
<div class="slider-container" <?php if( have_rows('slider_items') ): $active = 'active'; while ( have_rows('slider_items') ) : the_row();?><?php $active = ''; endwhile; endif; ?>>
<div id="testimonialcarousel" class="carousel slide carousel-fade casestudymastercontainer" data-ride="carousel" data-interval="5000">
<?php $featured_posts = get_field('testimonials');
if( $featured_posts ): ?>
<div class="carousel-inner">
<?php $active = 'active'; $i = 0; foreach( $featured_posts as $post ): setup_postdata($post); ?>
<div class="carousel-item <?php if($i == 0) echo 'active';?>">
<div class="container casestudycontainer">
<div class="newsboxcol">
<?php the_excerpt();?>
</div>
</div>
<div class="casestudycontainer clientdetailsblock">
<div class="container clientdetails">
<div class="imagecol row">
<div class="col logoblock">
<img src="<?php the_field('testimonial_logo'); ?>">
</div>
<div class="col logotitle">
<h5><?php the_field('testimonial_author_name');?></h5>
<h6><?php the_field('testimonial_author_title');?></h6>
</div>
</div>
</div>
</div>
</div>
<?php wp_reset_postdata(); ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
</div>
<div class="navitems">
<a class="carousel-control-prev" href="#testimonialcarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#testimonialcarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
Currently it displays both of the items at once, because it can’t show the “active” class only because they’re both displaying the active class.. Any help would be great!
Before the endforeach;
statement you need to increment your counter i++;
I could have missed it but I don’t see that happening anywhere.
That was it!! Thanks for that John.. I just utterly missed it!
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.