# davidjerleke/embla-carousel

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/davidjerleke-embla-carousel).**

8,042 stars · 239 forks · TypeScript · mit

## Links

- GitHub: https://github.com/davidjerleke/embla-carousel
- Homepage: https://www.embla-carousel.com
- awesome-repositories: https://awesome-repositories.com/repository/davidjerleke-embla-carousel.md

## Topics

`carousel` `carousel-component` `carousel-plugin` `dependency-free` `fade-slider` `javascript` `mobile` `mobile-web` `react` `slider` `slider-plugin` `slideshow` `solid` `svelte` `touch` `touch-events` `typescript` `vanilla` `vue`

## Description

Embla Carousel is a lightweight JavaScript carousel library and barebones slider engine designed for creating touch-enabled, swipeable content sliders. It functions as a plugin-based framework that manages scroll physics and slide positioning without imposing specific UI styles, while providing a programmable API for custom carousel development.

The system is distinguished by its modular architecture, allowing developers to extend core logic through external plugins and custom event hooks. It is compatible with server-side rendering, generating initial styles on the server to prevent layout shifts during client hydration.

The library covers a broad range of capabilities, including responsive layout management, automated content scrolling, and high-precision touch interactions. It includes built-in support for accessibility via ARIA labels and keyboard navigation, as well as programmatic controls for slide navigation and state synchronization.

The project is written in TypeScript.

## Tags

### Part of an Awesome List

- [Carousels and Sliders](https://awesome-repositories.com/f/awesome-lists/devtools/carousels-and-sliders.md) — Implements a lightweight, touch-enabled content slider with high-precision swipe interactions. ([source](https://cdn.jsdelivr.net/gh/davidjerleke/embla-carousel@master/README.md))
- [Index Navigation](https://awesome-repositories.com/f/awesome-lists/devtools/carousel-and-gallery/index-navigation.md) — Tracks the current scroll index and determines the availability of forward or backward movement. ([source](https://www.embla-carousel.com/docs/api/methods))

### User Interface & Experience

- [Carousels](https://awesome-repositories.com/f/user-interface-experience/carousels.md) — Acts as a programmable framework for building custom carousels with specialized navigation and event logic.
- [Content Carousels](https://awesome-repositories.com/f/user-interface-experience/content-display-components/content-carousels.md) — Offers a lightweight JavaScript library for creating touch-enabled, programmable content carousels.
- [Viewport-Snapped Sections](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/viewport-snapped-sections.md) — Positions slides relative to viewport edges and calculates precise snap points based on layout size. ([source](https://www.embla-carousel.com/docs/guides/alignments))
- [Content Sliders](https://awesome-repositories.com/f/user-interface-experience/content-sliders.md) — Provides high-precision touch interactions and fluid motion for swipeable content sliders.
- [Physics Engines](https://awesome-repositories.com/f/user-interface-experience/content-sliders/physics-engines.md) — Provides a barebones engine that handles scroll physics and positioning independently of UI styles.
- [Percentage-Based Position Calculators](https://awesome-repositories.com/f/user-interface-experience/coordinate-based-position-calculators/percentage-based-position-calculators.md) — Calculates slide offsets by mapping internal coordinates to CSS percentages for precise positioning.
- [Viewport Layout Calculators](https://awesome-repositories.com/f/user-interface-experience/image-dimension-calculators/viewport-layout-calculators.md) — Calculates element dimensions and offsets relative to the viewport to resolve slide alignment.
- [Scroll Axis Configurations](https://awesome-repositories.com/f/user-interface-experience/layout-containers/scroll-snapping-configurations/scroll-axis-configurations.md) — Allows configuration of the scroll axis and snap positions to define the carousel's visual structure. ([source](https://www.embla-carousel.com/docs/api/options))
- [Slide Transition Controllers](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/slide-lifecycle-hooks/auto-slide-state-events/slide-transition-controllers.md) — Provides controls to move the view to specific scroll indices or adjacent slides with optional instant transitions. ([source](https://www.embla-carousel.com/docs/api/methods))
- [Programmatic Controls](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/slide-state-management/programmatic-controls.md) — Provides imperative methods to programmatically trigger transitions to specific slides or adjacent elements. ([source](https://www.embla-carousel.com/docs/guides/previous-and-next-buttons))
- [Responsive Slide Adapters](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/navigation-flow-controllers/vertical-slide-stacks/responsive-slide-adapters.md) — Automatically adjusts slide alignment and layout based on viewport size for responsive displays. ([source](https://www.embla-carousel.com/docs/guides/alignments))
- [Carousel Navigation APIs](https://awesome-repositories.com/f/user-interface-experience/programmatic-triggers/carousel-navigation-apis.md) — Provides a programmable API to trigger slide transitions and manage carousel actions via code. ([source](https://www.embla-carousel.com/docs/get-started/svelte))
- [Slide Dimension Calculation](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/dimension-controllers/minimum-dimension-calculators/dimension-constraints/grid-column-customization/dynamic-dimension-calculation/slide-dimension-calculation.md) — Calculates scroll positions using CSS dimensions to support fixed, variable, or responsive slide sizes. ([source](https://www.embla-carousel.com/docs/guides/slide-sizes))
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Applies different slide sizes and configurations based on viewport width during server rendering. ([source](https://www.embla-carousel.com/docs/guides/server-side-rendering))
- [Responsive Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-layouts.md) — Supports responsive layouts that adapt slide dimensions and alignment across different screen breakpoints.
- [Slide Navigation Logic](https://awesome-repositories.com/f/user-interface-experience/slide-navigation-logic.md) — Controls the number of slides that advance per action and enables infinite looping. ([source](https://www.embla-carousel.com/docs/api/options))
- [Accessibility Implementations](https://awesome-repositories.com/f/user-interface-experience/slider-components/slider-orchestration/accessibility-implementations.md) — Implements comprehensive ARIA labels and keyboard controls to ensure the carousel is accessible to all users.
- [Accessible UI Components](https://awesome-repositories.com/f/user-interface-experience/accessible-ui-components.md) — Provides interactive carousel components built with ARIA labels and keyboard support for accessibility compliance. ([source](https://www.embla-carousel.com/docs/plugins/accessibility))
- [Assistive Interface Designs](https://awesome-repositories.com/f/user-interface-experience/assistive-interface-designs.md) — Implements interface design patterns that optimize navigation for screen readers and keyboard-only users. ([source](https://www.embla-carousel.com/docs/plugins))
- [Custom Event Systems](https://awesome-repositories.com/f/user-interface-experience/custom-event-systems.md) — Ships a system for defining and dispatching custom events to notify external UI of carousel state changes. ([source](https://www.embla-carousel.com/docs/api/methods))
- [Event-Driven State Synchronizers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers/event-driven-state-synchronizers.md) — Synchronizes the external UI with internal scroll progress and index changes using reactive event streams.
- [Navigation Buttons](https://awesome-repositories.com/f/user-interface-experience/navigation-buttons.md) — Enables the creation of interactive buttons and pagination dots to trigger slide transitions. ([source](https://www.embla-carousel.com/docs/guides))
- [Timed Transitions](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/animation-transition-engines/slide-transition-engines/timed-transitions.md) — Implements automatic slide transitions based on a timer to cycle content without user input. ([source](https://www.embla-carousel.com/docs/plugins))
- [Coordinate-Based Slide Transitions](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/slide-layout-styling/synchronized-slide-movement/coordinate-based-slide-transitions.md) — Transitions the visual appearance of elements based on their relative coordinate position during a scroll. ([source](https://www.embla-carousel.com/docs/examples/predefined))
- [Scroll Progress Mapping](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/scroll-progress-mapping.md) — Implements logic to calculate the current scroll position as a percentage to determine slide visibility and progress. ([source](https://www.embla-carousel.com/docs/api/methods))
- [Automated Transitions](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/automated-transitions.md) — Provides automated content scrolling with timed transitions to move slides without user interaction.
- [Continuous Motion](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-tools/continuous-motion.md) — Supports continuous scrolling automation to move content in a smooth, constant motion. ([source](https://www.embla-carousel.com/docs/plugins/auto-scroll))
- [Slide Groups](https://awesome-repositories.com/f/user-interface-experience/slide-groups.md) — Allows bundling multiple slides together so they navigate as a single unit. ([source](https://www.embla-carousel.com/docs/guides))
- [Slider Interaction Configurators](https://awesome-repositories.com/f/user-interface-experience/sliders/slider-interaction-configurators.md) — Provides settings to configure slider response behaviors such as dragging and focus events. ([source](https://www.embla-carousel.com/docs/api/options))
- [State Class Mapping](https://awesome-repositories.com/f/user-interface-experience/state-class-mapping.md) — Adds CSS class names to elements when slides become active, in-view, or selected. ([source](https://www.embla-carousel.com/docs/plugins/class-names))
- [Transition Effects](https://awesome-repositories.com/f/user-interface-experience/transition-effects.md) — Implements smooth opacity transitions between slides to create cross-fade effects. ([source](https://www.embla-carousel.com/docs/plugins/fade))
- [Viewport Visibility Observers](https://awesome-repositories.com/f/user-interface-experience/viewport-visibility-observers.md) — Uses intersection observers to monitor slide visibility and trigger state updates when content enters the viewport.

### Graphics & Multimedia

- [Frame-Synced Animations](https://awesome-repositories.com/f/graphics-multimedia/frame-synced-animations.md) — Ensures fluid carousel transitions and continuous scrolling by syncing animations with the browser paint cycle.

### Software Engineering & Architecture

- [Extensible Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/extensible-plugin-architectures.md) — Employs a modular architecture that allows injecting optional plugins to extend the core carousel logic.
- [Engine Behavior Configuration](https://awesome-repositories.com/f/software-engineering-architecture/engine-behavior-configuration.md) — Offers a programmable interface to customize the internal engine and interaction patterns of the carousel. ([source](https://www.embla-carousel.com/docs/examples/predefined))
- [Plugin Integrations](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/third-party-plugins/plugin-integrations.md) — Provides a modular system for integrating optional plugins to extend the carousel's core functionality. ([source](https://www.embla-carousel.com/docs/api/plugins))
- [Server-Side Rendering Style Registries](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/framework-specific-integrations/server-side-rendering-style-registries.md) — Generates minimal server-side CSS transforms to prevent layout shifts before client hydration.
- [Hook-Based Plugin Systems](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/hook-based-plugin-systems.md) — Utilizes a modular architecture with custom event hooks for extending carousel logic via plugins.

### Web Development

- [Hydration State Management](https://awesome-repositories.com/f/web-development/hydration-state-management.md) — Ensures the initial visual state remains stable during client hydration to prevent layout shifts. ([source](https://www.embla-carousel.com/docs/plugins))
- [Responsive Layout Adaptation](https://awesome-repositories.com/f/web-development/responsive-layout-adaptation.md) — Overrides carousel settings based on media query breakpoints and provides size hints for SSR. ([source](https://www.embla-carousel.com/docs/api/options))
- [Server-Side Rendering](https://awesome-repositories.com/f/web-development/server-side-rendering.md) — Ensures the carousel structure and markup are correctly generated on the server before client-side hydration. ([source](https://www.embla-carousel.com/docs/guides))
- [SSR-Compatible Component Libraries](https://awesome-repositories.com/f/web-development/ssr-compatible-component-libraries.md) — Ensures the carousel is compatible with server-side rendering to prevent cumulative layout shift.