An interactive slider using Intersection Observer – Part 2

Intro

In this tutorial, I’ll teach you how to create a backend for the animated slider yourself. In the previous tutorial, that I created here. I provided my readers with a guide on how to set up an Interactive Slider, which triggers when in the visible viewport and doesn’t trigger before.

Setting Up a Back End for a Glide.js Slider (with ACF)

To power our slider using a back end, you can integrate it with WordPress using Advanced Custom Fields (ACF). With ACF, you define custom fields (e.g. images, text, links) for your slider items in the WordPress admin.

On the back end, ACF lets you structure and manage slider content dynamically through the WordPress dashboard. You can then expose this data via the WordPress REST API or directly within PHP templates. The front end can fetch or render these items in the expected HTML format, enabling a dynamic, easy-to-maintain slider with smooth animations and full content control from WordPress.

I’ll setup an example using the ACF Repeater Field which is part of the Advanced Custom Fields Pro plugin.

The Back End Setup of ACF

Our slider needs the following fields:

1. A field for each slide’s heading.
2. 3 fields for each slide’s content.

We’ll use a nested repeater here:

• Slide Heading – the text subfield, will correspond to each of our slider labels. Clicking on each swaps the slides one from another.
• Slide – our repeater placed within its parent will contain the content for each of the slides.

• To make sure, that we always have 3 columns of elements inside the slider at most, we’ll to set the Minimum Rows and Maximum Rows input values to 3. These settings reside under the Validation Tab of each field.

ACF Repeater Setup Validation Field

Then, make sure to assign that Field Group to any page of your choice, you can do so at the bottom of the Field Group ACF page.

ACF Location Rules Setting

We’ll use a shortcode next to embed the slider directly within the content of that page, based on the settings provided via ACF.

Code Example

We’ll now expand upon the code provided in the previous example:

<?php 
global $post;
if( have_rows( 'how_slides', $post->ID ) ): 
?>
    <div class="glide glide--67e296fd5424b">
        <div class="glide__bullets" data-glide-el="controls[nav]">
            <?php while( have_rows( 'how_slides', $post->ID ) ): the_row(); ?>
                <button class="glide__bullet" data-glide-dir="=0"><?php the_sub_field( 'slide_heading', $post->ID ); ?></button>
            <?php endhwile; ?>
        </div>
        <div data-glide-el="track" class="glide__track">
            <ul class="glide__slides">
                <?php while( have_rows( 'how_slides', $post->ID ) ): the_row(); ?>
                    <li class="glide__slide">
                        <?php if( have_rows( 'slide', $post->ID ) ): ?>
                            <?php while( have_rows( 'slide', $post->ID ) ): the_row(); ?>
                                <div class="glide__slide--inner glide__slide--inner-1">
                                    <?php the_sub_field( 'slide_content', $post->ID ); ?>
                                </div>
                            <?php endwhile; ?>
                        <?php endif; ?>
                    </li>
                <?php endhwile; ?>
            </ul>
        </div>
    </div>
<?php endif; ?>

The above code is pretty simple. We’ll basically mixing our previously created HTML with the ACF API, fetching the code from the current page, we are on. We can embed the code using the wpd_glide shortcode, next – anywhere within our page.

Useful Links

• Intersection Observer API
• Glide JS
• Source Code
• Tutorial Part 1