davidjerleke/embla-carousel

Features

• Carousels and Sliders - Implements a lightweight, touch-enabled content slider with high-precision swipe interactions.
• Carousels - Acts as a programmable framework for building custom carousels with specialized navigation and event logic.
• Frame-Synced Animations - Ensures fluid carousel transitions and continuous scrolling by syncing animations with the browser paint cycle.
• Extensible Plugin Architectures - Employs a modular architecture that allows injecting optional plugins to extend the core carousel logic.
• Content Carousels - Offers a lightweight JavaScript library for creating touch-enabled, programmable content carousels.
• Viewport-Snapped Sections - Positions slides relative to viewport edges and calculates precise snap points based on layout size.
• Content Sliders - Provides high-precision touch interactions and fluid motion for swipeable content sliders.
• Physics Engines - Provides a barebones engine that handles scroll physics and positioning independently of UI styles.
• Percentage-Based Position Calculators - Calculates slide offsets by mapping internal coordinates to CSS percentages for precise positioning.
• Viewport Layout Calculators - Calculates element dimensions and offsets relative to the viewport to resolve slide alignment.
• Scroll Axis Configurations - Allows configuration of the scroll axis and snap positions to define the carousel's visual structure.
• Slide Transition Controllers - Provides controls to move the view to specific scroll indices or adjacent slides with optional instant transitions.
• Programmatic Controls - Provides imperative methods to programmatically trigger transitions to specific slides or adjacent elements.
• Responsive Slide Adapters - Automatically adjusts slide alignment and layout based on viewport size for responsive displays.
• Carousel Navigation APIs - Provides a programmable API to trigger slide transitions and manage carousel actions via code.
• Slide Dimension Calculation - Calculates scroll positions using CSS dimensions to support fixed, variable, or responsive slide sizes.
• Responsive Breakpoints - Applies different slide sizes and configurations based on viewport width during server rendering.
• Responsive Layouts - Supports responsive layouts that adapt slide dimensions and alignment across different screen breakpoints.
• Slide Navigation Logic - Controls the number of slides that advance per action and enables infinite looping.
• Accessibility Implementations - Implements comprehensive ARIA labels and keyboard controls to ensure the carousel is accessible to all users.
• Index Navigation - Tracks the current scroll index and determines the availability of forward or backward movement.
• Engine Behavior Configuration - Offers a programmable interface to customize the internal engine and interaction patterns of the carousel.
• Plugin Integrations - Provides a modular system for integrating optional plugins to extend the carousel's core functionality.
• Server-Side Rendering Style Registries - Generates minimal server-side CSS transforms to prevent layout shifts before client hydration.
• Hook-Based Plugin Systems - Utilizes a modular architecture with custom event hooks for extending carousel logic via plugins.
• Accessible UI Components - Provides interactive carousel components built with ARIA labels and keyboard support for accessibility compliance.
• Assistive Interface Designs - Implements interface design patterns that optimize navigation for screen readers and keyboard-only users.
• Custom Event Systems - Ships a system for defining and dispatching custom events to notify external UI of carousel state changes.
• Event-Driven State Synchronizers - Synchronizes the external UI with internal scroll progress and index changes using reactive event streams.
• Navigation Buttons - Enables the creation of interactive buttons and pagination dots to trigger slide transitions.
• Timed Transitions - Implements automatic slide transitions based on a timer to cycle content without user input.
• Coordinate-Based Slide Transitions - Transitions the visual appearance of elements based on their relative coordinate position during a scroll.
• Scroll Progress Mapping - Implements logic to calculate the current scroll position as a percentage to determine slide visibility and progress.
• Automated Transitions - Provides automated content scrolling with timed transitions to move slides without user interaction.
• Continuous Motion - Supports continuous scrolling automation to move content in a smooth, constant motion.
• Slide Groups - Allows bundling multiple slides together so they navigate as a single unit.
• Slider Interaction Configurators - Provides settings to configure slider response behaviors such as dragging and focus events.
• State Class Mapping - Adds CSS class names to elements when slides become active, in-view, or selected.
• Transition Effects - Implements smooth opacity transitions between slides to create cross-fade effects.
• Viewport Visibility Observers - Uses intersection observers to monitor slide visibility and trigger state updates when content enters the viewport.
• Hydration State Management - Ensures the initial visual state remains stable during client hydration to prevent layout shifts.
• Responsive Layout Adaptation - Overrides carousel settings based on media query breakpoints and provides size hints for SSR.
• Server-Side Rendering - Ensures the carousel structure and markup are correctly generated on the server before client-side hydration.
• SSR-Compatible Component Libraries - Ensures the carousel is compatible with server-side rendering to prevent cumulative layout shift.

Star-Verlauf