Opens in a new tab
7th Nov '23
/
16 comments

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

Get access to all 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Search Results Template in Bricks

Search Results Template in Bricks

Updated on 26 Oct 2023 This Pro tutorial provides the steps to set up a search template in Bricks with these features: Step 1 Create…
Categories:
Pro
Team Member Photos Stack with Hover Tooltips in Bricks

Team Member Photos Stack with Hover Tooltips in Bricks

Herman Baiatian shared in the Bricks Facebook group here that he worked on overlapping team member headshots showing info in hover tooltips. I recreated it…
Categories:
Pro
New Ribbon for Posts in Bricks

New Ribbon for Posts in Bricks

This Pro tutorial provides the steps to display a "New" ribbon for posts that were published in the last x days in Bricks. Update: Added…
Categories:
Tags:
Pro
tsParticles in Bricks

tsParticles in Bricks

Updated on 5 Aug 2023 This Pro tutorial provides the steps to set up tsParticles, a lightweight TypeScript (uses JavaScript) library for creating particles as…
Categories:
Pro
Dropdown Menu in Bricks using Interactions

Dropdown Menu in Bricks using Interactions

This Pro tutorial provides the steps to toggle a WordPress menu when a div is clicked using the Interactions feature in Bricks. When clicked: Step…
Categories:
Pro
Bricks Slider Images From ACF Flexible Content Sub Field

Bricks Slider Images From ACF Flexible Content Sub Field

Consider the following field group associated with Pages when using ACF Pro: "Page Fields" field group|_"Page Content" Flexible Content field|__"Layout 1" layout|___"Title" Text field|___"Layout 1…
Pro
Image Banner as Query Loop Posts Grid’s Last Item in Bricks

Image Banner as Query Loop Posts Grid’s Last Item in Bricks

In the comments section of How to Insert Element(s) Between Query Loop Posts in Bricks tutorial, a site member asked: This is fantastic! Is there…
Categories:
Tags:
Pro
Reading Progress Bar in Bricks

Reading Progress Bar in Bricks

This Pro tutorial provides the steps to implement a reading progress bar in Bricks builder. Step 1 Add the progress element as the first child…
Categories: