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.