embla-carousel

carousel ui-component animation

embla-carousel은 웹을 위한 확장 가능한 최소 구조의 카루셀 라이브러리입니다. 이 라이브러리는 사용자에게 기본적인 기능을 제공하면서도, 필요에 따라 추가 기능을 쉽게 확장할 수 있도록 설계되었습니다.

Latest Ver

Homepage

Github

7,095

순간의 흐름, 웹의 아름다움

embla-carousel로 웹사이트에 감각적인 스크롤 경험을 선사하세요.

간단하면서도 확장 가능한 웹용 카루셀 라이브러리

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

Sample Code

⚠️ import 문을 포함한 일부 코드는 jsFiddle에서 정상 실행되지 않을 수 있습니다. 실행 오류가 발생할 경우 코드 복사 후 직접 실행해보세요.

📄 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'));