Draggable slider
A draggable slider lets people drag a row until one item is current, then rest there.
DraggableAlso called Drag carousel, Snap slider, Touch slider, Horizontal picker.
Here it is working.
Drag the row. It stays inside the box.
For designers
The neighbour is Infinite marquee. A marquee loops a set for display. This page is a choice. Dots, arrows, drag and keys all exist to land on an item. If you add those to a marquee, you have already switched patterns. Keep the snap honest. If the item they aimed at slides past, the throw is too strong or the snap is late. One item in view is the easy case. Several peeking neighbours is fine if the current one is obvious. Reduced motion can keep buttons and skip the throw.
When to use draggable slider
Use this when
- People are choosing one item from a row.
- Drag, buttons and keys can all land on the same item.
- You can snap to a real item, not a half-slide.
- Reduced motion can still change item without a throw.
Reach for something else when
- Nobody is choosing. Use Infinite marquee.
- The choice should wrap and shift depth. Use Infinite parallax slider.
- The choice sits on a ring. Use Circular slider.
- The field is two-axis. Use Infinite draggable grid.
- The items are names in a column. Use Hoverable list.
How to build it
Lay items in a row. Draggable on x, snap to each item position, InertiaPlugin so a throw settles on a snap. Bounds, or a wrap if you need a loop without parallax. Buttons and arrow keys move by one snap, the same function as the drag rest. A drag of more than a few pixels should not fire a link on the slide. Set sizes before it runs. On reduced motion, skip inertia and jump to the item.
Official GSAP
Draggable.create('.row', {
type: 'x', bounds: '.bounds', edgeResistance: 0.8,
});Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.
Common questions
- How is this different from Infinite marquee?
- A marquee shows a set. A slider asks for a choice.
- Should it loop?
- Only if landing on the first item after the last is useful.
- How many items in view?
- One is the clearest. Two or 3 can peek.
- What about keyboard?
- Arrow keys step one item.
- What does reduced motion do?
- Change item with no throw. Buttons still work.
Save as skill
A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.
Use this with your AI
Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.
Last reviewed 26 AUG 2026
Next: Circular slider