splidejs

carousel ui-component accessibility

Splide는 가벼우며 유연하고 접근성이 뛰어난 슬라이더/캐러셀 라이브러리입니다. 의존성이 없으며 Lighthouse 오류도 발생하지 않습니다.

Latest Ver 4.1.4

Homepage

Github

5,079

📢 Splide는 다양한 웹 프로젝트에 적용 가능한 슬라이더 및 캐러셀 구현을 위한 라이브러리입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide-renderer.min.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.cjs.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.cjs.min.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.esm.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.esm.min.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/splide.min.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/utils/splide-utils.cjs.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/utils/splide-utils.cjs.min.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/utils/splide-utils.esm.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/js/utils/splide-utils.esm.min.js

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide-core.min.css

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide.min.css

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/themes/splide-default.min.css

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/themes/splide-sea-green.min.css

https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/themes/splide-skyblue.min.css

Sample Code

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

📄 HTML
<div class="splide" id="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">Slide 1</li>
<li class="splide__slide">Slide 2</li>
<li class="splide__slide">Slide 3</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/splide@3/splide.min.js"></script>
<script>
new Splide('#splide').mount();
</script>

🎨 External CSS
<link href="https://cdn.jsdelivr.net/npm/splide@3/splide.min.css" rel="stylesheet">

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

⚙️ JavaScript
new Splide('#splide').mount();