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 526 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Custom Meta Box Thumbnail Slider in WordPress

Custom Meta Box Thumbnail Slider in WordPress

This Pro tutorial provides the steps to set up an image and YouTube video thumbnail slider in WordPress using Splide and Meta Box. The site…
Categories:
Tags:
How to add SVG icon as list item bullets

How to add SVG icon as list item bullets

Add this sample CSS: Replace brxe-list with the class of your ul element. Here's how you can generate the value of background-image property: Copy your…
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:
Floating Element in Bricks

Floating Element in Bricks

How to create a floating element in Bricks that appears across the entire website.
Categories:
Tags:
How to import custom posts with featured images and custom fields by fetching an API using a single AJAX call

How to import custom posts with featured images and custom fields by fetching an API using a single AJAX call

In this tutorial, we will import a list of movies - including images and custom fields - inside a custom post type by fetching a…
Categories:
Tags:
Width and Height of Mobile Hamburger Toggle in Bricks

Width and Height of Mobile Hamburger Toggle in Bricks

Looking to change the size of Bricks hamburger toggle in the mobile menu? The default width value of 20px can be changed by selecting the…
Categories:
Pro
Masonry + Click-type Infinite Scroll in Bricks

Masonry + Click-type Infinite Scroll in Bricks

This Pro tutorial provides the steps to lay out posts in a masonry style with a View More button, which, when clicked, loads the next…
Categories:
How to Push The Footer Down in Bricks

How to Push The Footer Down in Bricks

Looking to have the footer stay at the bottom of the browser window in your Bricks site? Simply add this CSS: There are several places…
Categories:
Tags:
Pro
Stacking Post Cards in Bricks

Stacking Post Cards in Bricks

How we can stack posts in a query loop so they stick on top of the previous one when scrolling.
Categories:
Tags: