Splidejs/splide
Splide
Splide es una librería TypeScript agnóstica de frameworks para crear carruseles de contenido y galerías de imágenes accesibles y táctiles. Proporciona una implementación de sliders sin dependencias que admite interacciones de arrastrar, deslizar y flick en navegadores móviles y de escritorio.
La librería se distingue por una capa de accesibilidad integral que utiliza roles ARIA y soporte para lectores de pantalla. Cuenta con un sistema de puntos de interrupción (breakpoints) responsive que adapta las dimensiones y el comportamiento del slide según el ancho de la pantalla, junto con un sistema de plugins para extender la funcionalidad principal con componentes personalizados y efectos de transición.
El proyecto cubre una amplia gama de capacidades de diseño e interacción, incluyendo disposiciones en cuadrícula, dimensiones de slide variables y flujos de trabajo de slider sincronizados. Incluye optimizaciones de rendimiento como carga diferida de medios y monitorización de intersección con el viewport, así como navegación multimodal mediante teclado, rueda del ratón o miniaturas.
Hay paquetes wrapper dedicados disponibles para la integración en diversas arquitecturas de frameworks frontend.
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.
