Home Forums General Issues Relationship carousel with $i counter


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 class="casestudycontainer clientdetailsblock">
    <div class="container clientdetails">
    <div class="imagecol row">
    <div class="col logoblock">
    <img src="<?php the_field('testimonial_logo'); ?>">
    <div class="col logotitle">
    <h5><?php the_field('testimonial_author_name');?></h5>
    <h6><?php the_field('testimonial_author_title');?></h6>
    <?php wp_reset_postdata(); ?>
    <?php endforeach; ?>
    <?php endif; ?>
    <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 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>
  • 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!

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

You must be logged in to reply to this topic.

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 Cookie Policy. If you continue to use this site, you consent to our use of cookies.