Motion Gallery · Carousel & Flow
Focus Slider
A centred-focus slider — the card at the centre scales up while its zigzag neighbours peek past. Horizontal or vertical.
Example 1 · Entrance + pause on hover
The centre card, in focus
Portrait cards slide through the centre; the middle one scales up to 200% and sits clean while its neighbours peek past on either side, offset in a gentle zigzag. The whole slider fades in on load; Motion → On Hover is Pause. Click a card to open the lightbox.
Example 2 · Cinematic overlap
Cards stacked behind the focus
A low Slide Portion (30%) pulls the cards into a tight overlap, so the enlarged centre card (Center Scale 240%) rises out of a deck of its neighbours. Zigzag off for a clean, layered stack.
Example 3 · Zigzag scatter
Neighbours thrown high and low
Square cards spread apart (Slide Portion 82%) with a strong Zigzag (85%) — the off-centre cards fling alternately up and down, while the focused one stays centred and calm.
Example 4 · Vertical
Focus, stacked top-to-bottom
Direction → Vertical turns the slider upright: landscape cards flow down the stage, the middle one enlarging as it reaches centre. Zigzag now pushes neighbours left and right.
Example 5 · Framed & fixed
A padded frame, click to zoom
Card Padding adds an inner frame and rounder corners to each card, and Zigzag Mode → Fixed ties the up/down offset to each card so the pattern holds as it scrolls. Click a card to open it full-size.
Docs & Playground
Tweak every option live
Play with all of these settings in real time and read the full option reference in the manual.
Free & open source
Build with this element, free.
Install the framework and the Bootstrap 5 theme, then drag this element into any page.