Process · Timeline slider
A milestone slider for Bricks Builder with a large card per entry, its neighbors peeking faintly on either side, and a year bar underneath that doubles as the slider's own pagination, filling up to the active year. A small script keys each segment to its slide's year so the bar stays in sync.
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 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 Timeline slider, class fbk-tl-slider
How faint the slides beside the active one are (photo and text)
- --fbk-t-side-opacity
- 0.45
- --fbk-t-side-text
- 0.5
How long the active year's line takes to fill (class --fill)
- --fbk-t-fill-time
- 1s
The bar is full up to the active year (no autoplay timer here)
- --fbk-slider-elapsed
- 1
Color of the years already passed, matching the active one
- --fbk-slider-accent
- var(--primary)
Replaces
In Fancy Bricks 1.0 and 2.0 this was Timeline Slider (1.0).
