Log in

How to Make a CSS-Only Slider with Scroll Snap

By Purely CSS · Published October 9, 2026

A CSS-only slider shows one slide at a time and lets people swipe or scroll to the next, using scroll-snap instead of a JavaScript library. The container scrolls horizontally, and each slide snaps neatly into place. It works with touch, mouse, trackpad and keyboard.

1. A scroll-snap slider

Put the slides in a flex row inside a container with overflow-x: auto. Set scroll-snap-type: x mandatory on the container and scroll-snap-align on each slide, and give every slide a flex-basis of 100% so exactly one fits at a time.

Hiding the scrollbar is optional. Leaving it visible gives people an obvious way to move between slides.

<div class="slider">
  <div class="slide s1">1</div>
  <div class="slide s2">2</div>
  <div class="slide s3">3</div>
</div>

Tips

  • Add tabindex="0" to the container so keyboard users can focus it and scroll with the arrow keys.
  • Use scroll-behavior: smooth if you add anchor links that jump to a slide.
  • For an auto-playing carousel, use CSS @keyframes to move the track, and pause it on hover.

Common questions

How do I make a slider without JavaScript?

Use a horizontally scrolling container with scroll-snap-type: x mandatory, and give each slide scroll-snap-align and a width of 100%.

Can a CSS slider be swiped on a phone?

Yes. A scroll-snap container scrolls natively with touch, so swiping works with no extra code.

How do I add arrows or dots to a CSS slider?

Link to each slide with anchor links using :target or id fragments, or use radio inputs. The slider examples in the library show both techniques.

Want more examples?

Browse the full collection of pure CSS sliders, or try your own code in the playground.

More guides