Splidejs/splide
Splide
Splide is a framework-agnostic TypeScript library for creating accessible, touch-enabled content carousels and image galleries. It provides a dependency-free implementation of sliders that support drag, swipe, and flick interactions across mobile and desktop browsers.
The library distinguishes itself through a comprehensive accessibility layer using ARIA roles and screen reader support. It features a responsive breakpoint system that adapts slide dimensions and behavior based on screen width, alongside a plugin system for extending core functionality with custom components and transition effects.
The project covers a wide range of layout and interaction capabilities, including grid arrangements, variable slide dimensions, and synchronized slider workflows. It includes performance optimizations such as lazy media loading and viewport intersection monitoring, as well as multi-modal navigation via keyboard, mouse wheel, or thumbnail linking.
Dedicated wrapper packages are available for integration into various frontend framework architectures.
Features
- Accessible Sliders - Implements an accessible carousel with ARIA roles, screen reader notifications, and focus management.
- Accessibility Layers - Implements a comprehensive accessibility layer that manages ARIA roles and focus states for assistive technologies.
- Slide Layout Parameters - Provides configuration for the number of slides per page and the spacing between them.
- Framework-Agnostic UI Development - Offers a dependency-free TypeScript library that integrates with various frontend frameworks via dedicated wrappers.
- Slide Transition Engines - Ships built-in fade and slide animations to control how content enters the viewport.
- Carousel Navigation APIs - Provides a JavaScript API for programmatically controlling slide transitions and carousel state.
- Responsive Breakpoints - Features a responsive breakpoint system that automatically adapts slide dimensions and behavior based on window width.
- Responsive Sliders - Ships a responsive breakpoint system that automatically adapts slide layouts based on screen width.
- Slide Navigation Logic - Provides programmatic and manual controls to move the view to specific slides or relative offsets.
- Input-Driven Navigation - Supports navigation via multiple input methods, including dragging, flicking, mouse wheels, and keyboard input.
- Touch-Enabled Carousels - Supports native touch-screen swiping and mouse-based dragging for seamless slide navigation.
- DOM Manipulation - Manipulates the DOM by applying CSS transforms to a single track element to move slides smoothly.
- TypeScript Carousel Libraries - Implements a lightweight, accessible content carousel and image gallery library using TypeScript.
- UI Transition Effects - Implements native visual transitions such as fades and slides for moving between content indices.
- Hook-Based Plugin Systems - Provides a hook-based plugin system to extend core lifecycle events and add custom carousel behaviors.
- Motion Accessibility Utilities - Automatically disables animations and autoplay when the user's system preference for reduced motion is detected.
- Carousel Autoplay Controls - Provides UI controls to pause autoplay rotation on hover or via a playback toggle for accessibility compliance.
- Carousel Instance Synchronization - Allows multiple carousel instances to be linked so that moving one automatically updates the position of the other.
- Structural Decoupling - Allows decoupling the track from the container to place navigation controls in custom locations.
- Custom Component Extensions - Provides a plugin system to create custom components that hook into the carousel's lifecycle and state.
- Dynamic Grid Layouts - Implements grid layouts to display multiple slides simultaneously in rows and columns.
- Slider Synchronization - Enables synchronization between multiple carousel instances so moving one updates the position of another.
- Control Positioning - Allows placing navigation controls in specific layout locations using placeholders for precise alignment.
- Carousel Height Adapters - Provides containers that keep slide heights adaptive or fixed while employing various cover modes.
- Pagination Indicators - Provides customizable pagination indicators with specific positioning and labeling for dots.
- Slide Aspect Ratio Configurators - Supports defining fixed or automatic widths and heights for slides using aspect ratios.
- Inactive Slide Focus Management - Prevents screen readers from interacting with content in inactive slides by managing their accessibility attributes.
- Slide Content Mutation - Provides an API to insert or remove slides dynamically using HTML strings, DOM elements, or selectors.
- Carousel Event Listeners - Provides custom event listeners that allow developers to synchronize external UI elements with carousel actions.
- Screen Reader Live Regions - Uses ARIA live regions to notify screen readers when new slides become visible during transitions.
- Automated Slide Rotation - Implements automatic slide rotation with configurable intervals and interaction-based pausing.
- Variable Slide Sizing - Allows adjusting individual slide widths based on their content rather than forcing uniform sizing.
- Thumbnail Navigation Systems - Implements a thumbnail navigation system linking a secondary preview slider to the primary carousel.
- Visibility-Triggered Actions - Monitors when a carousel enters the viewport to trigger automatic slide rotation and video playback.
- Custom Navigation Controls - Enables replacing default navigation arrows with custom HTML or images to match specific visual designs.
- Frontend Framework Integrations - Ships dedicated wrapper packages for seamless integration into various modern JavaScript frontend frameworks.
- Intersection Observer Implementations - Utilizes the IntersectionObserver API to trigger autoplay and media loading only when the carousel is visible.
- Media Lazy Loading - Optimizes performance by postponing the loading of images and media until they enter the viewport.
