Skip to content

Carousels & Tickers

Before/After Image Slider

Drag-handle before/after image comparison slider using pointer events and a keyboard-accessible slider role.

SubscriptionIncluded with the Velocity Components subscription.
$velocityx add before-after-slider
Props & docs

Needs a licence key — subscribe here, then velocityx loginonce.

AstroReactTailwind CSSNew

Before/After Image Slider

Before/After Image Slider

Live preview of the Before/After Image Slider component

After
Before
BeforeAfter

The code ships with Velocity.

Every component's full source — copy-paste ready, yours to edit — comes with any Velocity package. Buy once, own the code forever.

Get Velocity X — from $1,250 See all packages →

Using the Before/After Image Slider component

Every Velocity component is plain Astro or React markup styled with Tailwind utility classes. There is no proprietary runtime and no design-system wrapper to adopt — the component inherits whatever colour and type tokens your project already defines.

Read the component docs All 589 components

More Carousels & Tickers components

Browse all →

Logo Ticker

CSS-only infinite marquee of client/partner logos that loops seamlessly in either direction and pauses on hover or focus.

Text Marquee

CSS-only scrolling text strip for announcements, joining phrases with a separator glyph and looping infinitely.

Testimonial Carousel (Single)

One-up crossfading testimonial carousel with arrows, dots, autoplay with pause-on-hover, swipe and keyboard navigation.

Testimonial Carousel (Peek)

Multi-card testimonial carousel on native CSS scroll-snap showing a peek of the next card, with synced dots and arrow controls.

Image Carousel with Thumbnails

Large image preview with a clickable, auto-scrolling thumbnail rail, arrow/keyboard navigation and swipe support.

Full-Bleed Hero Slider

Full-bleed crossfading hero image slider with scrim overlay, headline/CTA content, autoplay, arrows, dots and swipe.