embla-carousel

carousel ui-component animation

Embla Carousel is an extensible bare bones carousel library for the web. It provides the essential functionality while allowing for easy enhancements based on user needs.

Latest Ver

Homepage

Github

7,095

In the Flow of Moments, the Beauty of the Web

Enhance your website with a sensory scroll experience using embla-carousel.

A simple yet extensible carousel library for the web

CDN Download

License: MIT

Asset Type :

View All Versions

Sample Code

⚠️ Some code, including import statements, may not run properly on jsFiddle. If it fails to execute, please copy the code and try it in your own environment.

📄 HTML
<div class="embla"><div class="embla__viewport"><div class="embla__container"><div class="embla__slide">Slide 1</div><div class="embla__slide">Slide 2</div><div class="embla__slide">Slide 3</div></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/embla-carousel/4.0.15/embla.min.js"></script><script>var embla = EmblaCarousel(document.querySelector('.embla__viewport'));</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/embla-carousel/4.0.15/embla.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/embla-carousel/4.0.15/embla.min.js"></script>

⚙️ JavaScript
var embla = EmblaCarousel(document.querySelector('.embla__viewport'));