slick-carousel

ui-component carousel responsive

slick-carousel은 다양한 설정 옵션을 제공하는 강력한 캐러셀 슬라이더 라이브러리입니다. 사용자가 이미지, 비디오, HTML 콘텐츠 등을 슬라이드 형태로 쉽게 표시할 수 있게 도와줍니다. 반응형 디자인과 터치 기능이 내장되어 있어 모바일과 데스크탑 환경 모두에서 원활하게 작동합니다.

Latest Ver 1.9.0

Homepage

Github

28,629

📢 slick-carousel은 사용자 친화적인 캐러셀 슬라이더를 구현할 수 있는 jQuery 플러그인입니다.

CDN 다운로드

License: MIT

Asset Type :

전체 버전 보기

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/ajax-loader.gif

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.eot

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.svg

https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/fonts/slick.ttf

Sample Code

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

📄 HTML
<div style='width: 50%; margin: auto;'>
  <div class='your-class'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>

🎨 External CSS
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" rel="stylesheet">

🧩 External JS
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

⚙️ JavaScript
$(document).ready(function(){
  $('.your-class').slick();
});