Opens in a new tab
Log inStart free

Thumbnail slider

A thumbnail slider for Bricks Builder: a full-width photo carries a title, text and button in the upper left, with a vertical brand-colored strip and a decorative word on the right, and a row of thumbnails below drives the whole thing. Changing slides brings the text in from the left as the accent bar grows.

Needs 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 Button

    A link styled as a button, with style, size and width.

  • 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 Slider + thumbnails, class fbk-thumbslide

Height of the large photo

--fbk-t-height
clamp(32em, 42vw, 38em)

Brand strip on the end side, with a big vertical word

--fbk-t-strip
clamp(8em, 14vw, 13em)
--fbk-t-strip-bg
var(--primary)
--fbk-t-word
"Explore"
--fbk-t-word-color
color-mix(in srgb, var(--black) 14%, transparent)

Accent: the line by the text and the focused thumbnail

--fbk-t-accent
var(--fbk-accent)
--fbk-reveal-accent
var(--fbk-t-accent)

Dark layer over the photo, so the white text stays readable

--fbk-t-shade
color-mix(in srgb, var(--base-ultra-dark) 45%, transparent)

Thumbnails: width of the strip and its distance from the edges

--fbk-t-thumbs-w
min(34em, 50%)
--fbk-t-edge
var(--space-xl)

Layout (changes below 767 px)

--fbk-t-columns
minmax(0, 1fr) var(--fbk-t-strip)
--fbk-t-strip-display
flex
--fbk-t-thumbs-pos
absolute
--fbk-t-thumbs-pad
0
--fbk-t-thumbs-end
calc(var(--fbk-t-strip) / 2)

Thumbnail arrows: centered on the strip's edges

--fbk-t-arrow-off
calc(var(--fbk-slider-size) / -2)

Replaces

In Fancy Bricks 1.0 and 2.0 this was Slider (1.0).

More like this

See all Sliders templates