General examples for every major slider feature.

Layouts

Basic Boxed Slider

Minimal fixed-size slider with controls, dots, and a classic horizontal transition.

Open example

Layouts

Responsive Default Layout

Default layout using responsive sizing inside its parent wrapper.

Open example

Layouts

Fixed Layout

Fixed layout keeps the configured width and height as the authored design canvas.

Open example

Layouts

Viewport Full Width

Full width layout escapes the parent wrapper and spans the browser viewport.

Open example

Layouts

Parent Scoped Full Width

fullWidthScoped fills the parent wrapper without applying full-bleed viewport offsets.

Open example

Layouts

Fullscreen Layout

Fullscreen slider with centered content frame, controls, and progress UI.

Open example

Navigation

Thumbnail Navigation

Thumbnail strip with boxed max width, centered layout, paging, and active sync.

Open example

Navigation

Dot Navigation Styles

Dot navigation using tooltip styling and scoped generated navigation CSS.

Open example

Navigation

Number Navigation Tooltip

Number navigation with tooltip hover and click-to-slide behavior.

Open example

Controls

Control Style Gallery

Control buttons using one of the richer controlStyle variants.

Open example

Progress

Progress Indicators

Linear and radial autoplay progress with custom colors, thickness, and placement.

Open example

Layers

Layer Positioning

Layers placed with data-x, data-y, data-x-offset, and data-y-offset.

Open example

Layers

Position Scope

Layer positioning can target the content frame or the full slider boundary.

Open example

Layers

Device Visibility

Layer-specific visibility settings for desktop, tablet, and mobile.

Open example

Layers

Layer Timing Interruption

Manual next/previous cancels unfinished layer entrances and fast-exits completed layers.

Open example

Backgrounds

Ken Burns Backgrounds

Background image slides using the Ken Burns option.

Open example

Media

Background Video

Slide background video with image fallback and overlay layers.

Open example

Media

Audio And Video Layers

Layer-hosted audio and video players using the slider media event path.

Open example

Carousel

Carousel Normal

Equal-width visible slide carousel with responsive visibleSlides.

Open example

Carousel

Carousel Showcase

Showcase carousel with emphasized active slide.

Open example

Carousel

Carousel Gallery3D

3D gallery carousel with forced loop behavior and clickable side items.

Open example

Carousel

Carousel Gallery3D Full Screen

3D gallery carousel in full-screen layout with forced loop behavior and clickable side items.

Open example

Transitions

Grid Transitions

Image-splitting grid transition family using adaptive grid pieces.

Open example

Transitions

SliceBox Transitions

Cuboid-style SliceBox transition with vertical, horizontal, and random variants.

Open example