Splidejs/splide
Splide
Splide 是一个与框架无关的 TypeScript 库，用于创建可访问的、支持触摸的内容轮播图和图片库。它提供了一个无依赖的滑块实现，支持在移动和桌面浏览器上进行拖动、滑动和轻弹交互。
该库通过使用 ARIA 角色和屏幕阅读器支持的全面可访问性层脱颖而出。它具有一个响应式断点系统，可根据屏幕宽度调整幻灯片尺寸和行为，并配有一个用于通过自定义组件和过渡效果扩展核心功能的插件系统。
该项目涵盖了广泛的布局和交互功能，包括网格排列、可变幻灯片尺寸和同步滑块工作流。它包括懒加载媒体和视口交叉监控等性能优化，以及通过键盘、鼠标滚轮或缩略图链接进行的多模态导航。
提供专用的包装包，用于集成到各种前端框架架构中。
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.
