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();
});