Opens in a new tab
Log inStart free

Gallery · Auto-width slider

An auto-width photo gallery for Bricks Builder: every photo keeps its own proportion at the same height, with a control bar below showing progress, a counter, an autoplay countdown ring that doubles as the pause button, and the arrows. Each photo opens the lightbox.

Dark mode readyNeeds Code execution

Copying for Fancy Framework · Desktop first

Needs a framework. Get Fancy Framework (free)

In the annual plan, $99/year. See plans

Uses a small script. Turn on Code execution in Bricks › Settings › Custom code. How to turn on Code execution

Preview

Template details

What’s inside

The components it’s built from. They come with the template when you paste it, and you edit them from the Bricks panel.

  • FBK Intro

    Eyebrow, title, lead and an actions slot for buttons.

Adjust it

Change these variables in Bricks to tune it; everything else follows your framework.

On the element Gallery, class fbk-auto-gallery

Photos

--fbk-t-height
clamp(15em, 40vw, 25em)
--fbk-t-radius
var(--radius)
--fbk-t-zoom
var(--fbk-zoom)

Controls: the progress bar (the buttons are the library's common disc)

--fbk-t-accent
var(--fbk-accent)
--fbk-t-track
color-mix(in srgb, var(--text-color) 14%, transparent)

One hover duration for the whole library (--fbk-hover)

--fbk-t-duration
var(--fbk-hover)

Full guide for this template in the docs

Replaces

In Fancy Bricks 1.0 and 2.0 this was Image Slider - Auto width - Countdown - Progress (2.0).

More like this

See all Galleries templates