レスポンシブウェブデザインに使える多機能なカルーセル

いろいろなプラグインを使ってきましたが、今までで一番いろいろできるカルーセルのプラグインです。

slickについて

公式HPにいろいろなデモが載っているんですが一部を紹介します。
* 横カルーセル
* 縦カルーセル
* カルーセルのグループ化
* ブラウザの横幅で表示個数を変える
* 遅延読み込み
* カルーセルシンク
等など

MITライセンスなので商用利用も可能です。

公式HP

GitHub

ダウンロードは上記公式HP(下方)かGitHubからお願いします。
ちにみにCDNも用意されているのでHEADで読み込むだけという方法もあります。
URLはGitHubのREADMEを参照してください。

slickの使い方

GitHubからダウンロードすると以下のファイルが入っているので、適当な所に置いて読み込みましょう。

• slick.css
• slick-theme.css
• slick.min.js

<style rel="stylesheet" type="text/css" src="./slick.css"></style>
<style rel="stylesheet" type="text/css" src="./slick-theme.css"></style>
<script type="text/javascript" src="./slick.min.js"></script>

公式HPのデモから抜粋してコードを紹介します。

カルーセルシンク

asNavForというオプションにシンクさせたいカルーセルのclassを指定するだけ！

<div class="slider slider-for">
    <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>
<div class="slider slider-nav">
    <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>

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

複数画像を一緒にスライド

slidesToScrollにグループ化したい画像数を指定するだけ！
(slidesToShowも同じ数にしたほうがキレイだと思います)

<div class="slider multiple-items">
    <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><h3>7</h3></div>
    <div><h3>8</h3></div>
    <div><h3>9</h3></div>
</div>

$('.multiple-items').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 3
});

ブラウザの横幅で表示個数を変える

responsiveオプションの中に表示を切り替える横幅を指定(breakpoint)して、表示個数を設定(slidesToShow)するだけ！

<div class="slider responsive">
    <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><h3>7</h3></div>
    <div><h3>8</h3></div>
</div>

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

おわり

簡単にカルーセルが作れるので参考にしてみてください。
オプションを設定したのにドットやアローが表示されない！という人はslick-theme.cssが読み込まれているか確認してみてください。