ACF Custom Fields, Custom Post Types and Bootstrap Carousel

I am building a front end using Understrap/Bootstrap and CMS system in WordPress using ACF and custom posts. I am trying to integrate a carousel displaying product images and information taken from a custom post type.

The fields are pulling through but I have an issue with all the carousel-items being active which causes them to overlay each other.

I have seen similar issues when using an ACF repeater field but nothing using post types.

I know the solution is to add a php snippet with $num to control which slides are active but I can’t work out where or how to add the code in the loop.

Code is below, any help, advice or relevant answers appreciated. Thanks

    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<?php $featured_posts = get_field('ski_category');

if( $featured_posts ): ?>   

<div class="carousel-inner">

<?php foreach( $featured_posts as $post ): 

// Setup this post for WP functions (variable must be named $post).
setup_postdata($post); ?> 


    <div class="carousel-item <?php echo $active; ?>">

        <div class="row">

            <div class="col-sm-12 col-md-5 p-3">

                <img src="<?php the_field('equipment_image'); ?>">

            </div>

            <div class="col-sm-12 col-md-7 p-3">

                <h3><?php the_field('skisnowboard_name'); ?></h3>

                <?php the_field('equipment_description'); ?>
                 
                 <small class="text-muted"><?php the_field('user_level'); ?></small>


            </div>

        </div>
</div>

<?php endforeach; ?>  

</div>

<?php 
// Reset the global post object so that the rest of the page works correctly.
wp_reset_postdata(); ?>

<?php endif; ?> 

    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

Answer

You have to add counter ($i) and based on slide number – echo active class.

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">

<?php $featured_posts = get_field('ski_category');

if( $featured_posts ): ?>   

<div class="carousel-inner">

<?php $i = 0; $active = ''; foreach( $featured_posts as $post ): 

if ( 1 == $i ) {
  $active = 'activeSlide';
}
// Setup this post for WP functions (variable must be named $post).
setup_postdata($post); ?> 


    <div class="carousel-item <?php echo esc_attr( $active ); ?>">

        <div class="row">

            <div class="col-sm-12 col-md-5 p-3">

                <img src="<?php the_field('equipment_image'); ?>">

            </div>

            <div class="col-sm-12 col-md-7 p-3">

                <h3><?php the_field('skisnowboard_name'); ?></h3>

                <?php the_field('equipment_description'); ?>
                 
                 <small class="text-muted"><?php the_field('user_level'); ?></small>


            </div>

        </div>
</div>

<?php $i++; endforeach; ?>  

</div>

<?php 
// Reset the global post object so that the rest of the page works correctly.
wp_reset_postdata(); ?>

<?php endif; ?> 

    <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>

</div>

Advertisement

Answer