カルーセル表示を作成の際にどのｊQueryがいいのかなと調べた際に『slick』が簡単だったので使い方を覚書
選んだ理由としてはカルーセル表示の細かい設定が可能、自由度も高い。レスポンシブにも対応これだけで選ぶ理由がそろってます！
スポンサーリンク
実際の動きは公式サイトからご確認ください。（ダウンロードは下記からもできます！）
http://kenwheeler.github.io/slick/
ダウンロードしたファイルの中で使用するのは下記の3つ
slick.css
slick-theme.css
slick.min.js
もし、アイコンなどを使用する場合はfontsフォルダも一式に追加してください。
HTMLの記述
HTMLの記述ではまず
内の記述とbody内の記述になります。<head> <link rel="stylesheet" href="slick.css"> <link rel="stylesheet" href="slick-theme.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="slick.min.js"></script> </head>
以下はbody内の記述です。
<div class="single-item">
<div><img src="images/sample1.jpg"></div>
<div><img src="images/sample2.jpg"></div>
<div><img src="images/sample3.jpg"></div>
</div>
こちらを実行するscriptが以下になります。
任意の場所（head内）に記述すればOKで基本的にはこれで動きます。
<script>
$(function(){
$('.single-item').slick({
autoplay:true,
autoplaySpeed:3000,
dots:false,
pauseOnHover:true
});
});
</script>
［slick］のオプション設定
以下、大まかなオプションになります。
- autoplay - 自動再生
- autoplaySpeed - 自動再生の間隔
- arrows - 左右のナヴィゲーションの矢印を表示
- dots - サムネイルのドットを表示
- draggable - ドラッグによるコントロール
- fade - スライダーの要素をフェードイン・フェードアウトで切り替え
- easing - easingの種類を指定可能
- infinite - ループさせるか否か
- pauseOnHover - マウスオーバーで自動再生を一時停止
- pauseOnDotsHover - ドットにマウスオーバーで一時停止
- responsive - レスポンシヴの設定
カルーセル表示でいつもどれを使用するかを悩んでましたがサンプルでもあるように痒いところに手が届くので今後はslickを使用していくと思います。覚書までに。
Originally posted 2016-02-12 18:27:17.