Add skill6

Discover / Design

Embla Carousel

by davidjerlekeTypeScript

Lightweight, dependency-free carousel with fine-grained control. The carousel behind shadcn/ui.

Repositoryactive

Maturity: active because commit 4d ago, latest release v8.6.0. Derived from release and commit history, not a rating.

Stars
8.4k
Forks
256
Downloads / mo
146.1M
Last commit
2026-07-30
License
MIT
Open issues
15

Market and trust evidence

Edition not yet matched

No exact skills.sh identity match is available for this repository. Repository adoption and freshness remain visible above; install momentum is not inferred.

Trust analysis is a screening signal, not a security warranty. Read the ranking and trust methodology.

In practice

Written by AI from this repository’s README · low confidence

Provides a lightweight, dependency-free carousel with smooth physics and extensibility.

Use it when

Use when you need a highly customizable slider component without UI lock-in.

Not the right pick when

Not a plug-and-play solution if you want out-of-the-box styled arrows and pagination.

Capabilities

  • Fluid motion physics
  • Dependency-free
  • Highly extensible

Cost: Free and open source

Install

Derived from the published package name in the repository, not from a model.

CompareRepository ↗Homepage ↗npm ↗

Video walkthroughs

Third-party YouTube uploads matched to this tool by title, channel and repository name on 2026-08-03. Not made, reviewed or endorsed by SkillPilot. View counts and publish months are as of the match date and the month is approximate. Nothing loads from YouTube until you press play.

What the repository ships

Has docsCI configured

Detected from the actual files in the repository root.

Latest release v8.6.0

Published 2025-04-04

Support

Embla Carousel is an open source MIT licensed project. If you are interested in supporting this project you can sponsor it here:

What's Changed

  • [Bug]: scrollProgress not tightly synced to container translate by @Matoseb in https://github.com/davidjerleke/embla-carousel/pull/1134

New Contributors

  • @Matoseb made their first contribution in https://github.com/davidjerleke/embla-carousel/pull/1134

Full Changelog: https://github.com/davidjerleke/embla-carousel/compare/v8.5.2...v8.6.0

Tags

Carouselscarouselsliderreact

README

<br />

<div align="center">

<p align="center">

<a href="https://www.embla-carousel.com/"><img width="110" src="https://www.embla-carousel.com/embla-logo.svg" alt="Embla Carousel">

</a>

</p>

<p align="center">

<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/npm/l/embla-carousel?color=%238ab4f8"></a>

<a href="https://www.npmjs.com/package/embla-carousel"><img src="https://img.shields.io/npm/v/embla-carousel.svg?color=%23c1a8e2"></a>

<a href="https://bundlephobia.com/result?p=embla-carousel@latest"><img src="https://img.shields.io/bundlephobia/minzip/embla-carousel?color=%238ab4f8&label=gzip%20size">

</a>

</p>

<strong>

<h2 align="center">Embla Carousel</h2>

</strong>

<p align="center">

<strong>Embla Carousel</strong> is a lightweight, dependency-free carousel library built for smooth, fluid motion and precision swiping. It’s framework-agnostic, fully open source, and designed to give you complete control without unnecessary bloat.

</p>

<br>

<p align="center">

<strong>

<code>&nbsp;<a href="https://www.embla-carousel.com/docs/examples/predefined">Examples</a>&nbsp;</code>

</strong>

<strong>

<code>&nbsp;<a href="https://www.embla-carousel.com/docs/get-started#choose-installation-type">Installation</a>&nbsp;</code>

</strong>

</p>

</div>

<br>

<div align="center">

<p align="center">

<a href="https://www.embla-carousel.com/docs/get-started/module">

<img src="https://www.embla-carousel.com/javascript-logo.svg" width="40" />

</a>

<a href="https://www.embla-carousel.com/docs/get-started/module">

<img src="https://www.embla-carousel.com/typescript-logo.svg" width="40" />

</a>

<a href="https://www.embla-carousel.com/docs/get-started/react">

<img src="https://www.embla-carousel.com/react-logo.svg" width="40" />

</a>

<a href="https://www.embla-carousel.com/docs/get-started/vue">

<img src="https://www.embla-carousel.com/vue-logo.svg" width="40" />

</a>

<a href="https://www.embla-carousel.com/docs/get-started/svelte">

<img src="https://www.embla-carousel.com/svelte-logo.svg" width="40" />

</a>

<a href="https://www.embla-carousel.com/docs/get-started/solid">

<img src="https://www.embla-carousel.com/solid-logo.svg" width="40" />

</a>

<a href="https://github.com/donaldxdonald/embla-carousel-angular">

<img src="https://www.embla-carousel.com/angular-logo.svg" width="40" />

</a>

</p>

</div>

<br>

<div>

<p align="center">

<strong>· · ·</strong>

</p>

</div>

<br>

<div>

<strong>

<h2>✨ Sponsors</h2>

</strong>

<p>

Thanks to all the amazing <strong>Embla Carousel</strong> sponsors for making this project possible! <a href="https://github.com/sponsors/davidjerleke">Become a sponsor</a> and help it keep rolling forward.

</p>

<p>

<a href="https://github.com/syntaxfm">

<img src="https://avatars.githubusercontent.com/u/130389858?v=4" title="syntaxfm" width="100" style="max-width: 100%" />

</a><a href="https://github.com/Nalci">

<img src="https://avatars.githubusercontent.com/u/95542245?u=571321b2743c4a54877add003288a7ffb2025751&v=4" title="Nalci" width="100" style="max-width: 100%" />

</a><a href="https://github.com/KaufmannDigital">

<img src="https://avatars.githubusercontent.com/u/25249966?v=4" title="KaufmannDigital" width="100" style="max-width: 100%" />

</a>

</p>

<p>Thanks to all our <strong>past sponsors</strong> for helping <strong>Embla Carousel</strong> get to where it is today.</p>

<p>

<a href="https://github.com/gamegatornet">

<img src="https://avatars.githubusercontent.com/u/127601882?v=4" title="gamegatornet" width="50" style="max-width: 100%" />

</a><a href="https://github.com/tolluset">

<img src="https://avatars.githubusercontent.com/u/50096419?u=441ffc617de673faddba523abf7cc4fe0686b1eb&v=4" title="tolluset" width="50" style="max-width: 100%" />

</a><a href="https://github.com/alamenai">

<img src="https://avatars.githubusercontent.com/u/20143684?u=12f7f2c473d63c6862aebfbd3f8d18c3d3d66545&v=4" title="alamenai" width="50" style="max-width: 100%" />

</a><a href="https://github.com/luckasnix">

<img src="https://avatars.githubusercontent.com/u/50385918?u=edb739a97ecf71ef6be8b337e446df5ea7f5d413&v=4" title="luckasnix" width="50" style="max-width: 100%" />

</a><a href="https://github.com/Anrsgrl">

<img src="https://avatars.githubusercontent.com/u/115022999?u=252c1894802fb8eaa9e81314aac0c473474db423&v=4" title="Anrsgrl" width="50" style="max-width: 100%" />

</a><a href="https://github.com/hieptuanle">

<img src="https://avatars.githubusercontent.com/u/3164648?v=4" title="hieptuanle" width="50" style="max-width: 100%" />

</a><a href="https://github.com/simjinseok">

<img src="https://avatars.githubusercontent.com/u/42757954?u=d9478303eefe4f1c44eabc9220e613e73fc9c6c9&v=4" title="simjinseok" width="50" style="max-width: 100%" />

</a><a href="https://github.com/yklmk">

<img src="https://avatars.githubusercontent.com/u/70700647?v=4" title="yklmk" width="50" style="max-width: 100%" />

</a><a href="https://github.com/dmorgorg">

<img src="https://avatars.githubusercontent.com/u/9942570?v=4" title="dmorgorg" width="50" style="max-width: 100%" />

</a><a href="https://github.com/dylancetin">

<img src="https://avatars.githubusercontent.com/u/74064578?u=d54f52377d38fc184553799dce187580a02c1093&v=4" title="dylancetin" width="50" style="max-width: 100%" />

</a><a href="https://github.com/NiuDaLang">

<img src="https://avatars.githubusercontent.com/u/111876003?v=4" title="NiuDaLang" width="50" style="max-width: 100%" />

</a><a href="https://github.com/openscript">

<img src="https://avatars.githubusercontent.com/u/1105080?u=ebda165c92f1f174a7aef1c0defd8a0955b83b01&v=4" title="openscript" width="50" style="max-width: 100%" />

</a><a href="https://github.com/m0xAy">

<img src="https://avatars.githubusercontent.com/u/126299768?v=4" title="m0xAy" width="50" style="max-width: 100%" />

</a><a href="https://github.com/lenafaure">

<img src="https://avatars.githubusercontent.com/u/7765656?u=108be6daf419844c0605fc806f0c2f65f60cac71&v=4" title="lenafaure" width="50" style="max-width: 100%" />

</a><a href="https://github.com/Automatesmb">

<img src="https://avatars.githubusercontent.com/u/10057639?v=4" title="Automatesmb" width="50" style="max-width: 100%" />

</a>

</p>

</div>

<br>

<div>

<strong>

<h2>🧑‍💻 Contributors</h2>

</strong>

<p>

Thank you to all contributors for making <strong>Embla Carousel</strong> awesome! <a href="https://github.com/davidjerleke/embla-carousel/blob/master/CONTRIBUTING.md">Contributions</a> are welcome.

</p>

<p>

<a href="https://github.com/davidjerleke">

<img src="https://avatars2.githubusercontent.com/u/11529148?s=120&v=4" title="davidjerleke" width="50" style="max-width: 100%" />

</a><a href="https://github.com/Ronit-gurjar">

<img src="https://avatars2.githubusercontent.com/u/92150685?s=120&v=4" title="Ronit-gurjar" width="50" style="max-width: 100%" />

</a><a href="https://github.com/zaaakher">

<img src="https://avatars2.githubusercontent.com/u/46135573?s=120&v=4" title="zaaakher" width="50" style="max-width: 100%" />

</a><a href="https://github.com/xiel">

<img src="https://avatars2.githubusercontent.com/u/615522?s=120&v=4" title="xiel" width="50" style="max-width: 100%" />

</a><a href="https://github.com/javiergonzalezGenially">

<img src="https://avatars2.githubusercontent.com/u/78730098?s=120&v=4" title="javiergonzalezGenially" width="50" style="max-width: 100%" />

</a><a href="https://github.com/meirroth">

<img src="https://avatars2.githubusercontent.com/u/12494197?s=120&v=4" title="meirroth" width="50" style="max-width: 100%" />

</a><a href="https://github.com/hamidrezahanafi">

<img src="https://avatars2.githubusercontent.com/u/91487491?s=120&v=4" title="hamidrezahanafi" width="50" style="max-width: 100%" />

</a><a href="https://github.com/negezor">

<img src="https://avatars2.githubusercontent.com/u/9392723?s=120&v=4" title="negezor" width="50" style="max-width: 100%" />

</a><a href="https://github.com/tetarchus">

<img src="https://avatars2.githubusercontent.com/u/8436118?s=120&v=4" title="tetarchus" width="50" style="max-width: 100%" />

</a><a href="https://github.com/th-km">

<img src="https://avatars2.githubusercontent.com/u/35410212?s=120&v=4" title="th-km" width="50" style="max-width: 100%" />

</a><a href="https://github.com/openscript">

<img src="https://avatars2.githubusercontent.com/u/1105080?s=120&v=4" title="openscript" width="50" style="max-width: 100%" />

</a><a href="https://github.com/nwidynski">

<img src="https://avatars2.githubusercontent.com/u/25958801?s=120&v=4" title="nwidynski" width="50" style="max-width: 100%" />

</a><a href="https://github.com/wopian">

<img src="https://avatars2.githubusercontent.com/u/3440094?s=120&v=4" title="wopian" width="50" style="max-width: 100%" />

</a><a href="https://github.com/ranno-lauri">

<img src="https://avatars2.githubusercontent.com/u/87007115?s=120&v=4" title="ranno-lauri" width="50" style="max-width: 100%" />

</a><a href="https://github.com/ruijdacd">

<img src="https://avatars2.githubusercontent.com/u/9107610?s=120&v=4" title="ruijdacd" width="50" style="max-width: 100%" />

</a><a href="https://github.com/rojadesign">

<img src="https://avatars2.githubusercontent.com/u/35687281?s=120&v=4" title="rojadesign" width="50" style="max-width: 100%" />

</a><a href="https://github.com/sadeghbarati">

<img src="https://avatars2.githubusercontent.com/u/17789047?s=120&v=4" title="sadeghbarati" width="50" style="max-width: 100%" />

</a><a href="https://github.com/S-Shingler">

<img src="https://avatars2.githubusercontent.com/u/48463809?s=120&v=4" title="S-Shingler" width="50" style="max-width: 100%" />

</a><a href="https://github.com/SeanPlusPlus">

<img src="https://avatars2.githubusercontent.com/u/291079?s=120&v=4" title="SeanPlusPlus" width="50" style="max-width: 100%" />

</a><a href="https://github.com/Yonom">

<img src="https://avatars2.githubusercontent.com/u/1394504?s=120&v=4" title="Yonom" width="50" style="max-width: 100%" />

</a><a href="https://github.com/smultar">

<img src="https://avatars2.githubusercontent.com/u/6223536?s=120&v=4" title="smultar" width="50" style="max-width: 100%" />

</a><a href="https://github.com/soh3illl">

<img src="https://avatars2.githubusercontent.com/u/148645012?s=120&v=4" title="soh3illl" width="50" style="max-width: 100%" />

</a><a href="https://github.com/dev-suraj-kumar">

<img src="https://avatars2.githubusercontent.com/u/184739775?s=120&v=4" title="dev-suraj-kumar" width="50" style="max-width: 100%" />

</a><a href="https://github.com/Matoseb">

<img src="https://avatars2.githubusercontent.com/u/24431250?s=120&v=4" title="Matoseb" width="50" style="max-width: 100%" />

</a><a href="https://github.com/tlo-johnson">

<img src="https://avatars2.githubusercontent.com/u/8763144?s=120&v=4" title="tlo-johnson" width="50" style="max-width: 100%" />

</a><a href="https://github.com/yasuhiro-yamamoto">

<img src="https://avatars2.githubusercontent.com/u/25109330?s=120&v=4" title="yasuhiro-yamamoto" width="50" style="max-width: 100%" />

</a><a href="https://github.com/zackchengyk">

<img src="https://avatars2.githubusercontent.com/u/61947377?s=120&v=4" title="zackchengyk" width="50" style="max-width: 100%" />

</a><a href="https://github.com/anzbert">

<img src="https://avatars2.githubusercontent.com/u/38823700?s=120&v=4" title="anzbert" width="50" style="max-width: 100%" />

</a><a href="https://github.com/ben-basten">

<img src="https://avatars2.githubusercontent.com/u/45583362?s=120&v=4" title="ben-basten" width="50" style="max-width: 100%" />

</a><a href="https://github.com/sarussss">

<img src="https://avatars2.githubusercontent.com/u/15656996?s=120&v=4" title="sarussss" width="50" style="max-width: 100%" />

</a><a href="https://github.com/silllli">

<img src="https://avatars2.githubusercontent.com/u/9334305?s=120&v=4" title="silllli" width="50" style="max-width: 100%" />

</a><a href="https://github.com/yangfancn">

<img src="https://avatars2.githubusercontent.com/u/42950770?s=120&v=4" title="yangfancn" width="50" style="max-width: 100%" />

</a><a href="https://github.com/SaizFerri">

<img src="https://avatars2.githubusercontent.com/u/19834971?s=120&v=4" title="SaizFerri" width="50" style="max-width: 100%" />

</a><a href="https://github.com/lesha1201">

<img src="https://avatars2.githubusercontent.com/u/10157660?s=120&v=4" title="lesha1201" width="50" style="max-width: 100%" />

</a><a href="https://github.com/allen-garvey">

<img src="https://avatars2.githubusercontent.com/u/9314727?s=120&v=4" title="allen-garvey" width="50" style="max-width: 100%" />

</a><a href="https://github.com/Ammar-1999">

<img src="https://avatars2.githubusercontent.com/u/96714293?s=120&v=4" title="Ammar-1999" width="50" style="max-width: 100%" />

</a><a href="https://github.com/sedlukha">

<img src="https://avatars2.githubusercontent.com/u/14075940?s=120&v=4" title="sedlukha" width="50" style="max-width: 100%" />

</a><a href="https://github.com/modulareverything">

<img src="https://avatars2.githubusercontent.com/u/8567692?s=120&v=4" title="modulareverything" width="50" style="max-width: 100%" />

</a><a href="https://github.com/cundd">

<img src="https://avatars2.githubusercontent.com/u/743122?s=120&v=4" title="cundd" width="50" style="max-width: 100%" />

</a><a href="https://github.com/dsd">

<img src="https://avatars2.githubusercontent.com/u/81864?s=120&v=4" title="dsd" width="50" style="max-width: 100%" />

</a><a href="https://github.com/fcasibu">

<img src="https://avatars2.githubusercontent.c

Truncated. Read the full README on GitHub ↗

Related tools

SlickkenwheelerFully responsive carousel library for building image and content slidersSplidesplidejsLightweight, dependency-free carousel and slider.Keen SliderrcbyrPerformant, framework-agnostic touch slider/carousel.Swipernolimits4webThe most used touch slider library. Powers carousels on the mobile web.