Carousel replacements: controls, motion and semantics
Choose a carousel by the controls and motion behaviour your page needs, then inspect the configuration behind each result. This index compares twenty implementations without scores or rankings; an autoplay carousel should stop when keyboard focus enters and leave restarting to the reader.1
Start with the controls you need
Eighteen rows use libraries or web components; two use related original CSS scroll-snap patterns. The CSS rows share a browser platform and are not independent products. Every record identifies the version, source URL, licence, package-file hashes and exact fixture. Use the roster to compare the listed configurations.
Each fixture contains three panels with original text and focus targets. Some packages generate controls; others use author-supplied markup or API adapters. Buttons labelled Harness are original adapters. The row notes distinguish these from controls supplied by a package, so a working adapter is not mistaken for a built-in interface.
| Name | Version | Focus pause | Motion | SR slide | Keyboard | Swipe | Stop | No JS |
|---|---|---|---|---|---|---|---|---|
| Swiper | 14.3.0 | Y | N* | – | Y | Y* | partial | – |
| Splide | 4.1.4 | Y | Y* | – | Y | Y* | partial | – |
| Embla Carousel + Autoplay | 8.6.0 | Y | N* | – | Y | Y* | partial | – |
| Keen Slider | 6.8.6 | – | N* | – | Y | N* | – | partial |
| Glide.js | 3.7.1 | N | N* | – | Y | Y* | partial | – |
| Owl Carousel | 2.3.4 | N | N* | – | Y | Y* | partial | – |
| Slick | 2.0.0 | Y | N* | – | Y | Y* | partial | partial |
| Tiny Slider | 2.9.4 | N | N* | – | Y | partial* | partial | – |
| Siema | 1.5.1 | – | N* | – | Y | Y* | – | partial |
| Glider.js | 1.7.10 | – | N* | – | Y | Y* | – | – |
| Lory | 2.5.3 | – | N* | – | Y | Y* | – | – |
| Bootstrap Carousel | 5.3.8 | N | partial* | – | Y | Y* | partial | partial |
| Materialize Carousel | 1.0.0 | – | N* | – | Y | Y* | – | – |
| UIkit Slideshow | 3.25.27 | Y | N* | – | Y | Y* | partial | – |
| Shoelace Carousel | 2.20.1 | Y | partial* | – | Y | Y* | partial | – |
| Blaze Slider | 1.9.3 | N | N* | – | Y | Y* | partial | – |
| Swiffy Slider | 2.1.2 | N | N* | – | Y | Y* | partial | – |
| A11Y Slider | 0.4.22 | N | N* | – | Y | Y* | Y | partial |
| CSS horizontal snap + anchor navigation | 1.0.0-original-pattern | – | partial* | – | partial | Y* | – | partial |
| CSS vertical snap + sequential anchors | 1.0.0-original-pattern | – | partial* | – | partial | Y* | – | partial |
Y = observed; N = observed contradiction; partial = qualified; – = not tested; * = emulated.
| Name | AX slide live content | AX control names |
|---|---|---|
| Swiper | N | Y |
| Splide | Y | Y |
| Embla Carousel + Autoplay | N | N |
| Keen Slider | N | N |
| Glide.js | N | Y |
| Owl Carousel | N | N |
| Slick | N | Y |
| Tiny Slider | Y | Y |
| Siema | N | N |
| Glider.js | N | Y |
| Lory | N | Y |
| Bootstrap Carousel | N | Y |
| Materialize Carousel | N | N |
| UIkit Slideshow | N | Y |
| Shoelace Carousel | N | Y |
| Blaze Slider | N | Y |
| Swiffy Slider | N | Y |
| A11Y Slider | Y | Y |
| CSS horizontal snap + anchor navigation | N | Y |
| CSS vertical snap + sequential anchors | N | Y |
Y = present in the accessibility tree; N = absent; – = not tested. These are not screen-reader results.
Read the labels before filtering
Y records the named behaviour, N records an observed contradiction, and partial records a limited or qualified result. – preserves an unanswered question. * marks a simulated input or preference. The motion field concerns prefers-reduced-motion, the media feature for a preference to reduce non-essential motion.2 Pointer events identify an input type; a touch label does not by itself identify physical hardware.3
Keyboard reachability means the controls could receive keyboard focus; it does not establish successful activation in both directions.
Read the separate accessibility-tree table independently of the seven behaviour columns. Current-slide live content requires a live-region property tied to slide content. Control names requires a name on every inspected component control; Harness controls are excluded. Neither column reports what a person heard through a screen reader.
Read intermediate slide events as well as the final slide number. A carousel can complete a cycle and finish where it started. The logs retain those transitions, focus events and activated controls so a matching endpoint cannot conceal continued motion. Changes to a fixture, package option or browser belong in a new dated record.
Follow a result back to its fixture
Use the demo to search names and filter exact labels. It embeds the comparison records, loads no carousel package and displays fixture paths as plain text. A filter selects saved records; it does not execute a carousel. The CSV and JSON carry the full notes and provenance.
METHOD.md lists every package version, file hash and test step, so any row can be reproduced from the published package versions. The tested package files are kept in a separate test harness and are not republished here.
Interpret file sizes and dependencies
The size field counts uncompressed bytes in selected, identifiable upstream minified JavaScript files. It stays empty, with a reason, when no qualifying distribution exists. No local minifier substitutes a smaller figure. This is a file-size record, not a measurement of compressed transfer, production bundles, speed or responsiveness.
Dependency counts describe declared direct runtime entries. Peer requirements and packages added by the fixture have their own fields. Zero direct dependencies does not mean no other code is present: stylesheets, plugins and embedded licence notices are recorded separately.
Use the slider replacement guide to work through control mapping, timers and teardown before choosing a package. Keep the required behaviour explicit, and retain a local reproduction of any mismatch rather than treating a comparison row as a production guarantee.
Our observation data is licensed under CC BY 4.0. The tested packages retain their own licences.
Not covered on this page
- Image loading, routing, nested forms, right-to-left layout and dynamic content.
- A performance ranking, universal winner or complete package inventory.
- Behaviour outside the recorded versions and configurations.
Sources
-
WAI-ARIA Authoring Practices: Carousel pattern. Interaction and semantic guidance. Accessed 24 October 2026. ↩
-
MDN: prefers-reduced-motion. Media preference reference. Accessed 24 October 2026. ↩
-
MDN: Pointer events. Input-event reference. Accessed 24 October 2026. ↩
How we test: methodology. Found a mistake? Corrections.