Introduction

作成日: 2018-09-26

カルーセルライブラリを探すのはもう終わりです。

特徴

レスポンシブです。コンテナにあわせてスケールします。
ブレークポイントごとに別の設定を指定することができます。
利用可能ならCSS3を使います。そうでなくてもちゃんと動きます。
スワイプが使えます。無効にすることもできます。
マウスでドラッグすることができます。
無限ループが可能です。
矢印キーで操作することができます。
スライドを追加、削除、フィルタリングすることができます。
自動再生、スライドのドット、矢印、コールバック等を使うことができます。

デモ

以下のページでデモを見ることができます。
http://kenwheeler.github.io/slick

インストール

CDN

すぐにslickを使うには、出来るだけ早くユーザーに提供するための2つのCDNがあります。

jsDelivrを使う例

<head>にCSSファイルを追加するだけです。

<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick-theme.css"/>

そして</body>の前にJavaScriptファイルを追加します。

<script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.9.0/slick/slick.min.js"></script>

パッケージマネージャ

# Bower
$ bower install --save slick-carousel

# NPM
$ npm install slick-carousel

ダウンロード

以下からファイルをダウンロードしてください。詳しくはGetting Startedを参照してください。
https://github.com/kenwheeler/slick/releases

ブラウザサポート

slickはIE8以上と、Chrome、Firefox、Safari等の最新ブラウザで動作します。

依存関係

1.7が必要です。

Contributing

機能追加やissue、プルリクエストをリクエストする前に、CONTRIBUTING.markdownを確認してください。

ライセンス

このコンテンツはKen Wheeler(kenwheeler)によるslickドキュメントを翻訳/改変したものです。