Splidejs/splide

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.

Star history