awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
davidjerleke avatar

davidjerleke/embla-carousel

0
View on GitHub↗
www.embla-carousel.com↗

Embla Carousel

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.

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.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI
8,042 stars·239 forks·TypeScript·mit·28 views
  • 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 history

    Star history chart for davidjerleke/embla-carouselStar history chart for davidjerleke/embla-carousel

    How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.

    Projects sharing features with Embla Carousel

    These projects share indexed features with Embla Carousel. Shared tags can include platform or build tooling; verify the primary use case before treating a result as a replacement.
    • glidejs/glideglidejs avatar

      glidejs/glide

      7,668View on GitHub↗

      Glide is a dependency-free ES6 JavaScript library used to create responsive content sliders and carousels. It functions as a modular framework for implementing sliding content areas that adapt their layout and settings based on browser window breakpoints. The library is distinguished by a modular architecture that allows the inclusion of only necessary logic to reduce final bundle size. It separates core structural styles from thematic visual styles and utilizes a plugin system to extend the base slider functionality and lifecycle hooks. The component covers a range of interaction and naviga

      JavaScriptcarouseldependency-freees6
      View on GitHub↗7,668
    • splidejs/splideSplidejs avatar

      Splidejs/splide

      5,355View on GitHub↗

      Splide is a framework-agnostic TypeScript library for creating accessible, touch-enabled content carousels and image galleries. It provides a dependency-free implementation of sliders that support drag, swipe, and flick interactions across mobile and desktop browsers. The library distinguishes itself through a comprehensive accessibility layer using ARIA roles and screen reader support. It features a responsive breakpoint system that adapts slide dimensions and behavior based on screen width, alongside a plugin system for extending core functionality with custom components and transition effe

      TypeScriptautoplaybreakpointscarousel
      View on GitHub↗5,355
    • alvarotrigo/fullpage.jsalvarotrigo avatar

      alvarotrigo/fullPage.js

      35,437View on GitHub↗

      fullPage.js is a JavaScript full-screen scrolling library and layout engine used to create websites composed of vertical sections and horizontal slides that snap to the viewport. It provides a system for organizing web content into full-screen pages with automatic snapping behavior. The library distinguishes itself through a WebGL transition framework and visual storytelling tools, enabling cinematic effects such as 3D rotations, parallax backgrounds, fading, and water distortion during navigation. It also features a responsive adaptation system that can switch from automatic snapping to stan

      JavaScriptfullpagefullscreenjavascript
      View on GitHub↗35,437
    • meliorence/react-native-snap-carouselmeliorence avatar

      meliorence/react-native-snap-carousel

      10,519View on GitHub↗

      This project is a cross-platform mobile carousel component for creating swipeable image and content sliders. It functions as a virtualized list component that maintains performance by removing off-screen elements and utilizes a native-driver animation library to map scroll offsets to style properties on the native thread for lag-free transitions. The library provides a parallax image gallery capable of shifting images relative to scroll progress to create a sense of depth. It also features a layout system that supports right-to-left orientations for languages such as Arabic and Hebrew. Capab

      JavaScriptadvanced-effectscarouselflatlist-based
      View on GitHub↗10,519
    Compare all 30 related projects→

    Frequently asked questions

    What does davidjerleke/embla-carousel do?

    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.

    What are the main features of davidjerleke/embla-carousel?

    The main features of davidjerleke/embla-carousel are: Carousels and Sliders, Carousels, Frame-Synced Animations, Extensible Plugin Architectures, Content Carousels, Viewport-Snapped Sections, Content Sliders, Physics Engines.

    Which projects share features with davidjerleke/embla-carousel?

    Projects with overlapping indexed features include: glidejs/glide — Glide is a dependency-free ES6 JavaScript library used to create responsive content sliders and carousels. It… splidejs/splide — Splide is a framework-agnostic TypeScript library for creating accessible, touch-enabled content carousels and image… alvarotrigo/fullpage.js — fullPage.js is a JavaScript full-screen scrolling library and layout engine used to create websites composed of… meliorence/react-native-snap-carousel — This project is a cross-platform mobile carousel component for creating swipeable image and content sliders. It… kenwheeler/slick — Slick is a JavaScript carousel library used to create responsive, touch-enabled sliding content areas. It functions as… metafizzy/flickity — Flickity is a JavaScript library used to create responsive, touch-enabled content carousels and sliders for web pages.…