Splidejs/splide
Splide
Splide ist eine Framework-agnostische TypeScript-Bibliothek zum Erstellen barrierefreier, Touch-fähiger Content-Karussells und Bildergalerien. Sie bietet eine abhängigkeitsfreie Implementierung von Slidern, die Drag-, Swipe- und Flick-Interaktionen auf Mobil- und Desktop-Browsern unterstützen.
Die Bibliothek zeichnet sich durch eine umfassende Barrierefreiheitsebene unter Verwendung von ARIA-Rollen und Screenreader-Unterstützung aus. Sie verfügt über ein responsives Breakpoint-System, das Slider-Dimensionen und -Verhalten an die Bildschirmbreite anpasst, sowie ein Plugin-System zur Erweiterung der Kernfunktionen um benutzerdefinierte Komponenten und Übergangseffekte.
Das Projekt deckt eine Vielzahl an Layout- und Interaktionsmöglichkeiten ab, einschließlich Grid-Anordnungen, variabler Slider-Dimensionen und synchronisierter Slider-Workflows. Es enthält Performance-Optimierungen wie Lazy-Loading von Medien und Viewport-Intersection-Monitoring sowie multimodale Navigation via Tastatur, Mausrad oder Thumbnail-Verlinkung.
Dedizierte Wrapper-Pakete sind für die Integration in verschiedene Frontend-Framework-Architekturen verfügbar.
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.
