ganlanyuan/tiny-slider
Tiny Slider
Tiny-slider est une bibliothèque de carrousel en JavaScript natif utilisée pour créer des sliders de contenu tactiles et des composants d'interface accessibles sans dépendances externes. Elle fonctionne comme un moteur de mise en page responsive qui ajuste la visibilité et les dimensions des diapositives en fonction des points de rupture (breakpoints) de la fenêtre d'affichage.
La bibliothèque se distingue par un lazy loading intégré pour les images et les médias afin d'améliorer les performances de la page, ainsi qu'un système responsive qui adapte automatiquement le nombre d'éléments et l'espacement en fonction de la taille de l'écran de l'appareil. Elle prend également en charge les instances de slider imbriquées, permettant la création de mises en page à défilement multidirectionnel.
Le projet couvre des capacités complètes de navigation et d'interaction, notamment la prise en charge des flèches du clavier, l'accessibilité pour les lecteurs d'écran et la détection des gestes tactiles. Il fournit des outils pour les transitions automatiques, un stylage de navigation personnalisé pour la pagination et les boutons, ainsi qu'un système piloté par événements pour déclencher une logique personnalisée lors des changements de cycle de vie.
Features
- Accessible Sliders - Provides an interactive content carousel with keyboard navigation and screen reader support for inclusive UX.
- Touch-Enabled Carousels - Ships a touch-enabled carousel supporting native swipe gestures and mouse-based dragging for content navigation.
- Responsive Layout Breakpoints - Allows for the configuration of slider behavior and layout settings using specific viewport breakpoints.
- Accessible UI Components - Provides interactive carousel components built with ARIA roles and keyboard support for screen reader accessibility.
- Carousel Layout Configurations - Supports configuration of carousel orientation, visible slide count, and item spacing across different screen sizes.
- Content Sliders - Renders sequences of arbitrary content or images using horizontal or vertical sliding animations.
- Gesture Navigation - Provides navigation interactions driven by clicking, dragging, or swiping to move through content slides.
- Keyboard Navigation - Enables interface control and slide movement through keyboard arrow keys and screen reader announcements.
- Touch Navigation Interfaces - Implements gesture-based navigation, including swipe-to-advance functionality, for mobile devices.
- Responsive Layout Engines - Functions as a responsive layout engine that automatically adapts slide visibility and dimensions across different screen sizes.
- Viewport Width Constraints - Matches window width against breakpoints to apply specific layout settings and slide visibility.
- Touch and Drag Interactions - Supports switching slides by swiping on touch devices or dragging with a mouse.
- Touch Gesture Detection - Detects and responds to swipe gestures on touch-enabled screens to transition between content slides.
- Touch Gesture Handlers - Translates mouse and touch input coordinates into translation values to shift content slides.
- Media Lazy Loading - Postpones the loading of images and media until the slide enters the viewport to optimize performance.
- Gallery-Specific Lazy Loading - Defers loading of off-screen gallery assets to improve initial page load speed and reduce bandwidth.
- Responsive Layout Adaptation - Changes slider settings and item visibility based on viewport size to ensure a consistent user experience.
- Vanilla JavaScript Implementations - Implements a lightweight, dependency-free slider using standard ECMAScript and native browser APIs.
- Carousel Libraries - Provides a lightweight, dependency-free vanilla JavaScript library for creating touch-enabled content sliders.
- Lifecycle Event Callbacks - Executes user-defined callbacks during specific operational lifecycle stages such as index changes and transition start/end.
- Custom Event Emission - Emits custom events during slide transitions and index changes to synchronize state with external logic.
- Responsive Item Scaling - Automatically adjusts the number of visible slides and item spacing based on the current viewport width.
- Interaction Callbacks - Provides hooks that trigger custom functions in response to slide changes and touch/drag interactions.
- Nested Slider Layouts - Supports nested slider instances to enable the creation of complex multi-directional scrolling layouts.
- Nested Component Hierarchies - Allows separate slider controllers to manage independent axes of movement within a single parent container.
- Slide Navigation Controls - Includes interactive previous/next buttons and pagination indicators for manual slide cycling.
- Slide Layout and Styling - Supports configuring slide widths via percentages or pixels and defining spacing between items.
- Responsive Sliders - Modifies the number of visible slides dynamically based on viewport width for optimal display.
- Automated Slide Rotation - Automatically loops through slides at a set interval with programmatic pause and resume capabilities.
- Timer-Based Event Loops - Implements a timer-based event loop to manage automatic slide transitions with pause-on-hover logic.
- Image Lazy Loading - Delays the loading of off-screen images to reduce initial page load time and save bandwidth.
