flickity

ui-component carousel responsive

Flickity는 터치 지원, 반응형, 슬라이드 가능한 갤러리를 구현할 수 있는 JavaScript 라이브러리입니다. 사용자는 간단하게 웹 페이지에 이미지나 콘텐츠의 슬라이드 쇼를 구성할 수 있으며, 터치 스와이프, 반응형 레이아웃, 데스크탑과 모바일에서의 부드러운 드래그 등의 기능을 지원합니다.

Latest Ver 3.0.0

Homepage

Github

7,586

📢 터치 지원과 반응형 갤러리 슬라이드를 구현할 수 있는 JavaScript 라이브러리

CDN 다운로드

License: GPL-3.0

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.pkgd.js

https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.pkgd.min.js

https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.css

https://cdnjs.cloudflare.com/ajax/libs/flickity/3.0.0/flickity.min.css

Sample Code

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

📄 HTML
<div class="gallery js-flickity" data-flickity-options='{"cellAlign": "left", "contain": true}'><div class="gallery-cell">Your content here</div><div class="gallery-cell">More content here</div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js"></script><script>var flkty = new Flickity('.gallery');</script>

🎨 External CSS
<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js"></script>

⚙️ JavaScript
var flkty = new Flickity('.gallery');