Spotlight carousel
A spotlight carousel for Bricks Builder with four photos per view: the active one rises to full height with its button on top, while a synced text slider beside the thumbnails shows its large title and text. Both sliders grow in height together, so a longer text never covers the thumbnails.
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
Loading demo…
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 Text + photos, class fbk-spot
Height of the thumbnails; the active photo is as tall as the text and the thumbnails together
- --fbk-t-thumb-h
- clamp(13em, 18vw, 16em)
Least height of the text row (so the active photo is never short)
- --fbk-t-text-min
- 14em
Layout (changes on tablet and below 767 px): slides per view, and where each slider sits
- --fbk-t-per
- 4
- --fbk-t-rows
- minmax(var(--fbk-t-text-min), auto) var(--fbk-t-thumb-h)
- --fbk-t-photos-row
- 1 / span 2
- --fbk-t-text-row
- 1
Where the text starts, lined up with the thumbnails
- --fbk-t-text-pad
- 0px
Replaces
In Fancy Bricks 1.0 and 2.0 this was Carousel (2.0).
