Stories slider
A stories slider for Bricks Builder styled like a phone screen, with progress bars that fill as each story plays, the author and time next to a pause button, and a photo that slowly zooms in behind a headline, text and button. Tapping the right half skips ahead, the left half goes back, and holding pauses it on touch screens.
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 Stories, class fbk-stories
Width of the story (its height follows: 9:16) and how long each story lasts (the slow zoom)
- --fbk-t-card-w
- clamp(19em, 28vw, 25em)
- --fbk-t-story
- calc(var(--fbk-slider-duration, 0.3s) * 20)
Dark layers at the top and bottom of the photo, so the white text stays readable
- --fbk-t-shade
- color-mix(in srgb, var(--base-ultra-dark) 75%, transparent)
- --fbk-slider-color
- var(--white)
- --fbk-slider-accent
- var(--white)
The previous and next stories beside the active one (like Instagram on a computer)
- --fbk-t-side-scale
- 0.85
- --fbk-t-side-opacity
- 0.4
The active story's left edge inside the slider (it is centered)
- --fbk-t-edge
- calc(50% - var(--fbk-t-card-w) / 2)
Replaces
In Fancy Bricks 1.0 and 2.0 this was Instagram Stories Slider (2.0).
