Ken Burns Background Slideshow in Bricks

This Pro tutorial provides the steps for setting up a hero section in Bricks having images that pan and move as a background slideshow with the content (a title, text and a button - same for all slides) over the top.

We shall create a Page-specific Repeater using ACF Pro where slides with image and animation origin for each Page can be set.

After that, load UIKit, add a couple of custom PHP functions for getting the slide image's URL and alt text and "build" the hero section's structure by copy pasting the provided JSON.

Step 1

Install and activate ACF Pro.

At ACF → Field Groups, import the field group using the following JSON:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro