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..

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
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:
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:
Pro
Centered Image Logo in Bricks

Centered Image Logo in Bricks

Updated on 8 Mar 2023 This Pro tutorial provides the steps to add a logo image as the center menu item that shrinks when the…
Categories:
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:
How to Create a Grid Slider in Bricks

How to Create a Grid Slider in Bricks

In this tutorial, we'll learn how to create multiple rows and columns inside the default nested slider of Bricks. Introduction A user recently asked in…
Categories: