Draggable Portfolio Showcase Slider

The Draggable Portfolio Showcase Slider fills the viewport with one image at a time and lets visitors move through the set however they prefer. Dragging throws with inertia and settles onto the nearest image; the wheel advances one at a time; autoplay steps forward and dwells on each frame rather than sliding continuously. All three drive the same underlying timeline, so they never fight each other or drift out of sync.

Each slide carries a title, category and year over a gradient scrim. A drag hint, slide counter and progress bar communicate that the section is interactive and show where you are in the set.

Rebuilt on GSAP 3 with InertiaPlugin. The technique it's based on used GSAP 2 and paid plugins; this version needs neither.

Key Features

• Full-bleed slides, one at a time, wrapping infinitely in both directions
• Drag with inertia, mouse wheel, and dwelling autoplay
• Everything snaps to whole slides — never rests on a half image
• Drag hint that fades after first use, live slide counter, progress bar
• dwell and slideDuration settings control pacing
• Wheel capture releases after a full lap so the page can scroll past
• Vertical page scrolling still works on touch devices
• Autoplay pauses when the browser tab is hidden
• Autoplay disabled automatically under prefers-reduced-motion

Setup Notes

• The Collection List must be absolutely positioned; Webflow's unstyled Collection List Wrapper sits between it and your section and collapses percentage heights to zero
• Set wheelEnabled to false if the section sits mid-page and wheel capture feels intrusive
• Images need pointer-events: none or native image-drag fights the gesture