Transition showcase

Motion-first transitions demo

Use the buttons below to swap the slide transition without reloading the page.

Preview next transition
Transition showcase

Compare every visual change clearly

The slider keeps the same image set so the transition itself stays easy to evaluate.

Preview next transition
Transition showcase

Randomized controls on each transition

Control styles and dot styles are randomized each time to stress-test the UI combinations.

Preview next transition
Transition showcase

Full Width Scoped presentation only

This page stays fixed to fullWidthScoped so the transition test remains consistent.

Preview next transition

Control selection

Choose a control style and icon

Each click refreshes the slider content via AJAX and applies the selected controlStyle or controlIcon while keeping the layout fixed to fullWidthScoped.

Control styles

Control icons

Layout Transition Thumbs Dots Dot Style Numbers Nav Numbers Style Control Style Control Icon Progress

Control reference

Controls

Inspect every public control style and icon style on the same fullWidthScoped slider. Each button refresh keeps the current page and swaps only the slider content via AJAX.