ganlanyuan/tiny-slider
Tiny Slider
Tiny-slider este o bibliotecă de carusel vanilla JavaScript utilizată pentru a crea slidere de conținut cu suport tactil și componente UI accesibile, fără dependențe externe. Funcționează ca un motor de layout responsiv care ajustează vizibilitatea și dimensiunile slide-urilor în funcție de breakpoint-urile viewport-ului.
Biblioteca se distinge prin lazy loading integrat pentru imagini și media pentru a îmbunătăți performanța paginii și un sistem responsiv care scalează automat numărul de elemente și spațierea în funcție de dimensiunea ecranului dispozitivului. De asemenea, suportă instanțe de slider imbricate, permițând crearea de layout-uri de derulare multidirecționale.
Proiectul acoperă capabilități cuprinzătoare de navigare și interacțiune, inclusiv suport pentru săgețile de la tastatură, accesibilitate pentru cititoarele de ecran și detectarea gesturilor tactile. Oferă instrumente pentru tranziții automate ale slide-urilor, stilizarea personalizată a navigării pentru paginare și butoane, și un sistem bazat pe evenimente pentru declanșarea logicii personalizate în timpul schimbărilor ciclului de viață.
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.
