Glide.js

ui-component carousel animation

Glide.js는 가벼우면서도 유연하고 빠른, 종속성이 없는 JavaScript ES6 슬라이더 및 카루셀 라이브러리입니다. 모던 웹 개발에서 사용하기 적합하며, 사용하기 쉬운 API와 다양한 커스터마이징 옵션을 제공합니다.

Latest Ver 3.6.0

Homepage

Github

7,600

📢 Glide.js는 종속성 없이 사용할 수 있는 빠르고 가벼운 JavaScript 슬라이더 및 카루셀 라이브러리입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.esm.js

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.esm.min.js

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.js

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.min.js

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.modular.esm.js

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/glide.modular.esm.min.js

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.core.css

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.core.min.css

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.theme.css

https://cdnjs.cloudflare.com/ajax/libs/Glide.js/3.6.0/css/glide.theme.min.css

Sample Code

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

📄 HTML
<div class="glide">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">Slide 1</li>
<li class="glide__slide">Slide 2</li>
<li class="glide__slide">Slide 3</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>
<script>
            new Glide('.glide').mount();
        </script>

🎨 External CSS
<link href="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/css/glide.core.min.css" rel="stylesheet">

🧩 External JS
<script src="https://cdn.jsdelivr.net/npm/@glidejs/glide/dist/glide.min.js"></script>

⚙️ JavaScript
new Glide('.glide').mount();