No dependencies

DX Slider

Responsive, swipeable and configurable for real projects.

Effect
01

Any screen

Built to fit.

The track is measured again whenever the viewport changes.

02

Mouse + touch

Drag naturally.

Horizontal intent is detected before the page scroll is interrupted.

03

Keyboard ready

Every way in.

Use arrow keys, Home, End, pagination, buttons or a swipe.

04

Considerate autoplay

Moves, then waits.

Playback pauses for hover, focus, dragging and hidden browser tabs.

05

Public API

Make it yours.

Navigate, control playback, switch effects, inspect state or destroy the instance.

Drag the slide, use the controls, or press the arrow keys.

More setups

Examples

The same script with different options. View the page source to copy any of them.

Fade, hands-free

A crossfade that runs on its own: effect: 'fade' with autoplay: 3500. Hovering, focusing or hiding the tab pauses playback, and the play button stays in sync.

Fade

Nothing moves sideways.

Slides sit on top of each other and cross-dissolve.

Autoplay

Every 3.5 seconds.

The delay is the autoplay value in milliseconds.

Polite

It knows when to stop.

Hover this slide and the countdown quietly waits for you.

Auto height

With autoHeight: true the viewport animates to the height of the active slide, so short and long content can share one slider. loop: false gives the track hard ends and disables the arrows there.

Short slide

One line.

This slide barely says anything.

Medium slide

A little more.

This one has a couple of sentences, so it is naturally taller than the first. Watch the container ease to the new height instead of jumping.

Long slide

The tall one.

Auto height is made for content like this: a longer paragraph that would otherwise force every other slide to reserve the same space. The viewport measures the active slide and transitions its height using the same duration and easing as the slide animation, so the whole component feels consistent. Nothing below the slider jumps around unexpectedly — it simply eases out of the way.

Drag only, no chrome

All controls removed: navigation, pagination and keyboard are off, leaving pure drag and swipe with loop: false. Useful inside card layouts where arrows would be noise.

01 / 03

Grab this slide.

Drag with a mouse or swipe with a finger to move on.

02 / 03

Halfway there.

A short pull past swipeThreshold commits the change; anything less snaps back.

03 / 03

The end of the track.

With looping off, dragging further resists and settles back here.

Remote control

Any element on the page can drive a slider through its public API. These buttons live outside the component and call methods on the instance; the readout comes from getState().

External buttons

Steered from outside.

This slider has no built-in controls at all.

Programmatic

Slide two.

You arrived here through the API, not a swipe.

goTo(2)

Jumped straight in.

Indexes are zero-based, so this is slide number three.

DOM events

Every change dispatches bubbling DOM events on the root element, so other scripts can react without callbacks. This log listens for dxsliderbeforechange and dxsliderchange.

Listen in

Everything is announced.

Move this slider and watch the log below fill up.

event.detail

With context attached.

Each event carries the previous index, the new index and the slide element.

Analytics ready

Track it anywhere.

Wire the same events into analytics, lazy loading or your own UI.

  1. Waiting for the first event…