How can I set up a snappy/sticky scroll slider for portraits on my website using Webflow?

TL;DR

Create a wrapper div with 100vw width, 100vh height, overflow hidden, and position relative.
Add a flexbox scrollable track inside with horizontal direction, scroll-snap-type set to x mandatory, and optional mobile momentum scrolling.
Add slide items inside the track with fixed widths, scroll-snap-align, and Object Fit: Cover images filling each panel.
Use custom CSS in an Embed block to apply scroll snapping if not available in Webflow UI.
Optionally, make the slider sticky during vertical scroll by setting the wrapper to position: sticky and top: 0.

To create a snappy (or sticky) scroll slider for portrait images in Webflow, you’ll use a combination of scroll snapping, flexbox/grid, and overflow controls to achieve a horizontal, touch-friendly experience.

1. Structure Your Slider Container

Create a Div Block and name it something like Portrait Slider Wrapper.
Set its Width to 100vw and Height to 100vh (or as needed).
Set Overflow to hidden.
Apply Position: Relative so child elements can be absolutely/sticky positioned if needed.

2. Add the Scrollable Track

Inside the wrapper, add another Div Block named Portrait Slider Track.
Set Display: Flex, Direction: Row, and Overflow-X: Scroll.
Enable Scroll Snap:
Scroll Snap Type: X mandatory
Set this in Custom CSS or using Webflow’s built-in style panel if available (if not, use an Embed element with custom style).
Optionally add -webkit-overflow-scrolling: touch for mobile momentum scrolling.
Turn off Scrollbars if desired using custom code or styling.

3. Add Portrait Slide Items

Inside the scroll track, add multiple Div Blocks, each representing a portrait panel.
Set each panel’s Min Width and Max Width to the same fixed value (e.g., 80vw).
Set Scroll Snap Align to start or center within each item.
Add the portrait image inside each panel.
Use Object Fit: Cover and set width/height to fill the parent for full-image backgrounds.

4. Add Snap Behavior with Custom CSS (Optional)

Webflow doesn’t yet fully support Scroll Snapping via the UI, so optionally:

Add an Embed Element or custom code in page settings:
Attach these styles:

```

.portrait-slider-track {

scroll-snap-type: x mandatory;

-webkit-overflow-scrolling: touch;

}

.portrait-slide {

scroll-snap-align: start;

}

```

Replace class names with your actual class names.

5. Make It Sticky (Optional)

If you want the slider to remain in view while the rest of the page scrolls:

Set the Portrait Slider Wrapper to Position: Sticky and Top: 0.
Ensure its parent doesn’t block sticky positioning (no Overflow: hidden/scroll on ancestors).

Summary

To create a snappy scroll slider in Webflow for portraits, use a horizontally scrollable flex container with scroll snapping enabled, place your image panels inside that container, and use snap-align on each panel to lock into place as you scroll. Use custom CSS for full control and sticky positioning if you want it fixed during vertical page scroll.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer