Process · Line carousel
A milestone carousel on a line for Bricks Builder, with a dot per milestone above a card showing its year, a round photo and a short title. Clicking a milestone brings it to the center, where it grows and brightens while the ones around it shrink and fade, timed to the slide's own move; built on the FBK Card component with an FBK Intro above.
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.
Adjust it
Change these variables in Bricks to tune it; everything else follows your framework.
On the element Milestones, class fbk-line-carousel
Dot size and the tint of the active milestone
- --fbk-t-dot
- 0.875em
- --fbk-t-active-bg
- color-mix(in srgb, var(--base-ultra-dark) 8%, transparent)
The milestones around the active one: their size and opacity
- --fbk-t-side-scale
- 0.8
- --fbk-t-side-opacity
- 0.6
How long they take to grow, shrink and fade: the slider's move time (its Speed, 700 ms)
- --fbk-t-move
- 0.7s
Replaces
In Fancy Bricks 1.0 and 2.0 this was Timeline slider (2.0).
