Skip to main content

Slider Components

5 Webflow native slider components with 1-click copy & paste from a library of 831+. Built for Memberstack integration.

Start building freeBrowse components
Free until you launch
No credit card
Works in any Webflow project
Grid to Slider Hero
View Component
SliderAll

Grid to Slider Hero

The Grid to Slider Hero runs a choreographed entrance: a scaled-down grid of images zooms to full size, alternating columns sweep vertically off-screen, and the last remaining image expands to fill the viewport. Headline, caption, category and supporting copy then animate in character by character using SplitText. Thumbnails appear last and switch between slides, cross-fading the background image and re-animating the copy each time. Scrolling past drifts and fades the hero out without pinning, so the rest of the page behaves normally. Slide content lives in a hidden block inside the section in the Designer — one record per image holding the headline words, caption, category and body copy as editable fields. Nothing needs to be changed in custom code to update the copy or add a slide. Key Features Multi-stage entrance: grid zoom, column sweep, image expansion, text reveal Seven slides with independent headline, caption, category and body copy All copy editable in the Designer, not in custom code Thumbnail navigation with keyboard support Character-level text animation via SplitText — free since GSAP 3.13 Scroll parallax that fades the hero out without pinning the page Dynamic viewport height so mobile browser chrome doesn't clip it Full reduced-motion path that lands on the finished state rather than blanking Optional click-to-enter gate, off by default Setup Notes Something must sit below the hero — the parallax needs scroll range, and on a page that can't scroll it would resolve as "fully scrolled" and hide the hero Set the grid images to eager loading; they're all part of the opening animation, so lazy loading causes blank frames Keep headline words short — two long words won't fit on one line at the display size Adding a slide means duplicating a copy record, adding a thumbnail, and adding grid images with a matching data-index

Draggable Portfolio Showcase Slider
View Component
SliderAll

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

Infinite Scrolling Team Slider
View Component
SliderAll

Infinite Scrolling Team Slider

The Infinite Scrolling Team Slider converts vertical scrolling into a horizontal procession of cards. The section pins to the viewport and cards travel across the screen on a staggered GSAP timeline, growing as they approach centre and shrinking as they leave. Scroll back up and the loop runs in reverse. Cards are stacked in the DOM rather than laid out in a row — GSAP handles all positioning — so the Collection List needs no flex or grid styling. After a configurable number of passes the section releases and the page scrolls on normally, which means it can sit above other content rather than only at the end of a page. Key Features CMS-driven; works with any Collection List of six or more items Infinite loop with no visible reset point Pins to the viewport while active, then releases so the page continues maxLoops setting controls how many full passes before the handoff Prev/next controls that nudge scroll position, keeping animation and scrollbar in sync Name and role rendered inside each card over a gradient scrim Built on GSAP 3 with ScrollTrigger — free for commercial use since 3.13 Setup Notes Something must follow this section on the page, or there's nowhere to hand scrolling back to Don't apply a transform to any ancestor of the pinned section; it breaks ScrollTrigger's pin Below roughly six cards the arc looks sparse — the script bails out and leaves them static Consider a plain grid fallback for reduced-motion users; the animation is the layout here, so disabling it leaves cards overlapping

Expandable Animated Card Slider
View Component
SliderAll

Expandable Animated Card Slider

The Expandable Animated Card Slider turns a Collection List into an interactive row of cards. Each card shows only its title until it's clicked, at which point it widens and reveals its description while every other card returns to its collapsed state. The expand animation is driven by width and transform transitions defined in Webflow, with the active state toggled by a single attribute rather than a class. Owl Carousel handles the horizontal scrolling and variable card widths, running on the jQuery that Webflow already loads. Key Features CMS-driven — bind any Collection List; card count adapts automatically Click to expand, click again to collapse, one card open at a time Attribute-based state (ms-code-slider-state) so class renames don't break it Variable-width cards via Owl Carousel's autoWidth, which native Webflow sliders can't do Responsive card sizing across desktop, tablet and mobile breakpoints Gradient scrim keeps title and body text legible over any image Respects prefers-reduced-motion Pagination dots included; arrows available via a config flag Setup Notes Requires the head and footer code blocks from the component's custom code The footer block must sit before </body> — Webflow loads jQuery there, and the script needs it Delete the Collection List's empty state if you ever filter the list, or the carousel will render it as a stray card Card and scrim need matching corner radii; mismatched radii cause square corners to bleed past the rounded card during the expand transition

Expandable Animated Card Slider
View Component
SliderAll

Expandable Animated Card Slider

The Expandable Animated Card Slider turns a Collection List into an interactive row of cards. Each card shows only its title until it's clicked, at which point it widens and reveals its description while every other card returns to its collapsed state. The expand animation is driven by width and transform transitions defined in Webflow, with the active state toggled by a single attribute rather than a class. Owl Carousel handles the horizontal scrolling and variable card widths, running on the jQuery that Webflow already loads. Key Features CMS-driven — bind any Collection List; card count adapts automatically Click to expand, click again to collapse, one card open at a time Attribute-based state (ms-code-slider-state) so class renames don't break it Variable-width cards via Owl Carousel's autoWidth, which native Webflow sliders can't do Responsive card sizing across desktop, tablet and mobile breakpoints Gradient scrim keeps title and body text legible over any image Respects prefers-reduced-motion Pagination dots included; arrows available via a config flag Setup Notes Requires the head and footer code blocks from the component's custom code The footer block must sit before </body> — Webflow loads jQuery there, and the script needs it Delete the Collection List's empty state if you ever filter the list, or the carousel will render it as a stray card Card and scrim need matching corner radii; mismatched radii cause square corners to bleed past the rounded card during the expand transition

Showing 1–5 of 5 componentstagged with Slider

No website yet? Check out our free & paid pre-built template websites!

View templates