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
Sticky Header Only For Visitors in Bricks

Sticky Header Only For Visitors in Bricks

A user asked: Anyone know if its possible to make the sticky of the header conditional only for logged out users? This Pro tutorial shows…
Categories:
How to add a custom SwiperJS slider in Bricks

How to add a custom SwiperJS slider in Bricks

In this tutorial, we'll show you how to integrate a custom slider in Bricks using the SwiperJS library and how to add custom parameters using…
Categories:
Tags:
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Synced thumbnail sliders in Bricks using BricksExtras

Synced thumbnail sliders in Bricks using BricksExtras

Setting up post-specific synced/linked thumbnail sliders that show photos from a gallery-type custom field using BricksExtras plugin in Bricks.
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
Accordion Grid Query Loop in Bricks

Accordion Grid Query Loop in Bricks

How to set up a accordion in Bricks such that the "titles" are arranged in a grid with the full width content opening below.
Categories: