What is a horizontal scroll section?
It's a section that stops (pins) when it reaches the top of the screen. Instead of the page continuing down, its content slides from right to left, one full-screen panel after another, driven by the normal scroll wheel or trackpad. When the last panel is reached, the page continues scrolling vertically.
It gives every panel the visitor's full attention while keeping the natural scroll gesture — no arrows or dragging needed.
How to create horizontal scroll in Elementor
- Create a parent container and add one child container per panel inside it.
- Design each panel freely: images, headings, text, buttons.
- Drag the Horizontal Slider widget into the same parent container, as a sibling of the panels.
- The widget detects the sibling containers, lines them up in a horizontal track and pins the section.
- Adjust Scrub (smoothness), Snap to panels and the Gap between panels.
- Publish and scroll.
The widget is an invisible controller: it doesn't add visual content of its own, so the panels look exactly as you designed them.
Settings you can adjust
| Setting | What it does | Default |
|---|---|---|
| Scrub | Smoothness of the sideways movement: lower = direct, higher = smoother | 1 |
| Snap to panels | Scroll stops centered on each panel | Off |
| Enable on mobile | Keep the horizontal effect on phones; when off, panels stack vertically | On |
| Gap between panels | Space between panels (px or vw) | 0 px |
When to use horizontal scroll
- Sequential storytelling: steps of a process, a timeline, the chapters of a story.
- Product presentations with several views or features.
- Services, one full-screen panel per service.
- Case studies, where each panel is a stage of the project.
Keep it to 3–6 panels. More than that and visitors may feel stuck in the section.
Performance
The movement uses a lightweight requestAnimationFrame loop with interpolation (lerp) — about 6 KB before minification, no animation library. It works together with Smooth Scroll if you enable it globally.
Related effects
- Stacked Cards — cards that pile up vertically on scroll.
- Scroll Stack — full sections sliding over each other.
- Expanding Cards — a horizontal image accordion that opens on hover.
