【Slick 設定ガイド】商品などを順に見せるレスポンシブ対応カルーセル、スライダー 2015.7

2015年7月17日

WEBの豆知識

自社が運営するサイト構築にレスポンシブウェブデザイン対応のカルーセル、Slickを設置してみました。

Slickは、副題が the last carousel you'll ever need(ずっと欲しかった究極のカルーセル）とあるので、他にもいろいろ使ってきましたが、今後はこれ1本でいけるかな？

ネットショップなど、商品画像を１つ１つスライドさせてユーザーへアピールしたいですよね？

そんな時、簡単に設置できて、いろいな効果も簡単に実装できるslickのカルーセルは大変使い勝手がよく、広告宣伝効果も高いと思います。

またスマホでの閲覧が爆発的に増える中、レスポンシブデザインに対応している事は今やマストと言えるでしょう。

ネットショップでよく使うカルーセルの見せ方として、複数画像を１枚１枚送り、なおかつ、レスポンシブ対応で画面幅に合わせて表示枚数を変える設定をご紹介します。

jQueryを利用する際に気をつけたいのは、そのスクリプトが日々進化している事です。

検索で使い方などを調べても、その記事を作成した際のガイドなので、その後に参照するjQueryなどが変わっていたり、紹介されているスクリプトがダウンロードされているものと適合しないで動かない事などがあります。

ですから、本家のガイドは本来きちんと参照したほうがいいと思います。

今回紹介しているバージョンは2015年7月17日、1.5.6です。ただダウンロードした時点でのjQueryの指定バージョンさえ合っていれば大丈夫かと思います。

jQueryの読み込みはダウンロード時に本家に紹介されているCDNで読み込めば簡単、確実です。

英語が苦手、またこのような設置は初めてという方の参考になるように、なるべくわかりやすくご紹介します。

Slick の本家ページ（英語だけどここが重要です）

（↑ここの４分の３くらいの場所にダウンロードのボタンもあります）

SlickをダウンロードしてくるためのGitHubページ

（PC画面だと右側カラムの中に「Download Zip」というボタンから最新スクリプトがダウンロードできます）

大まかな手順

1.自分のPCにSlickのファイルをダウンロードする。（上記参照） 2.必要なファイルをFTP等でウェブサイトへアップロードする。 3.ウェブサイトにコードを書き込む。

＜1.自分のPCにSlickのファイルをダウンロードする。＞

・ダウンロードして解凍すると複数のファイルが含まれています。 cssやjs本体が含まれるSlickフォルダの他、READMEファイル(使い方説明やライセンス情報）、Jsonファイルなどです。ライセンスはMITです。

＜2.必要なファイルをFTP等でウェブサイトへアップロードする。＞

・ウェブサイトにダウンロードしたファイルのうち、以下のものをアップロードします。

その際、Slickというフォルダを作成して一緒にいれておけばわかりやすいでしょう。

どこへアップロードしたかを覚えておきます。

トップページに設置するならば、トップページがある階層にフォルダを作成して入れるといいでしょう。

アップロードするファイル

slick.css slick-theme.css（デフォルトのスタイルを利用する） slickフォルダの中にある、fontsフォルダ（デフォルト記号などが利用可) ajax-loader.gif (ローディング中の画像) slick.min.js (js本体) slickの機能を変更するには、slick.jsが必要となります。

今回はslick.min.jsで大丈夫です。正常に動かす為にはjQueryのライブラリが必要ですが、それはCDNを利用して読み込みますのでアップするのはこれだけです。

これらのファイルをどこへアップしたか、メモしておきましょう。

（※CDN…自分のウェブサイトへファイルをアップせず、配布先から直接ファイルを読み込んでくるコンテンツデリバリーシステムの事）

スタイルシートは.cssのファイルなのでお間違いないように。

Sassに対応しているので、同名で.scssファイルが含まれています。

今回ご紹介する例では、トップページの階層にSlickというフォルダを作成し、そこに入れる事とします。Slickを設置するのは、トップページという事にします。

＜3.ウェブサイトにコードを書き込む。＞

ヘッダーに設置するコード

HTMLヘッダーの中（<head>〜</head>の間）に以下のコードを入れます。

コードはヘッダーの一番最後の方に入れるといいかと思います。今回は、slickというフォルダに入れて同階層に置いているので、スタイルシートのパスは以下のようになります。

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
// デフォルトのスタイルを利用する場合は↓も入れましょう
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

スライドさせる画像部分のコード

次に表示する画像を指定する部分ですが、以下のようにdiv要素で囲みます。

全体をdiv要素で囲み任意のクラス名をつけます。

その中の一つ一つの画像もdivで囲みます。つけたクラス名は後ほど使うのでメモしておきましょう。

この場合は、.top-slider としました。画像をクリックすると、その関連ページに飛ばしたいので、リンクをしてあります。リンクが無くても問題ありません。

<div class="top-slider">
<div><a href="飛ばし先"><img src="画像へのリンク1" /></a></div>
<div><a href="飛ばし先"><img src="画像へのリンク2" /></a></div>
<div><a href="飛ばし先"><img src="画像へのリンク3" /></a></div>
<div><a href="飛ばし先"><img src="画像へのリンク4" /></a></div>
<div><a href="飛ばし先"><img src="画像へのリンク5" /></a></div>
<div><a href="飛ばし先"><img src="画像へのリンク6" /></a></div>
</div>

今回はリンクを貼った画像を表示ですが、画像と共にテキストを表示したり、動画などのコンテンツも入れられるようです。

画像の枚数に制限は無いようです。

クラスをつけた要素はdivですが、他のものに変更する事もできます。その場合は、オプションで指定する必要があります。

js部分のコード

jsを読み込み、動かす関数部分を入れます。挿入位置は最後の</body>直前にいれます。

以下のコードを書く順も大切です。

jQueryを読み込み、slickのjsを読み込み、slickを動かす関数を書きましょう。

オプションを何も指定しない場合は、以下のようになります。

まずはこれを設置して、今までの過程に間違いが無いか、動くかどうかを確認するといいかと思います。動かない場合は、jsのパスに間違いがないか、スペルなど異なっていないかなどをチェックしてみましょう。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $('.top-slider').slick({
      
      });
    });
  </script>

上の２行は、jqueryを配布先から直接読み込んでいるCDN部分になります。

最初に申し上げましたが、ここでの参照はファイルをダウンロードした時点で本家に紹介されているものを使うのがいいかと思います。

こちらの設置説明ページにある Add slick.js before your closing <body> tag, after jQuery の部分のコードを拾ってきましょう。（上記では上の２行になります）

３行目は、slick.min.js を置いたパスを正確に指定します。

今回はslickフォルダに入れ、同じ階層に置いているのでこうなります。

関数の中で.top-slider とある部分は、ご自分でつけたdivのクラス名になります。

オプションの設置

オプションを指定するには、上記コードの空白行に入れていきます。

オプション名1 : 値, オプション名 2: 値, オプション名 3: 値という形で入れていきます。

最後の半角カンマを忘れずに。一番最後は半角カンマは要りません。

ここいらへん、ちょっと間違っても動きませんのでご注意を。

レスポンシブ対応のウェブサイトに設置し、一般的なオプションを指定した場合は、以下のようなコードになります。

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
      $('.top-slider').slick({
      autoplay:true,
      autoplaySpeed:2000,
      dots:true,
      slidesToShow:5,
      slidesToScroll:1,
      responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 1,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 1
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
      });
    });
  </script>

オプションの説明です。

autoplay: true, 自動再生にしています。（デフォルトはfalse動かないです）

autoplaySpeed: 2000,動くスピート（デフォルトは3000ミリ秒つまり3秒）

dots: true, カルーセル下に表示されるドット。どの画像が表示されているかわかる。（デフォルトfalseで非表示）

slidesToShow: 5, 一度に表示する画像の数（デフォルトは１）

slidesToScroll: 1,動いて変わる画像の数（デフォルトは１）

上記の設定ですと、１画面に５枚表示になり、1枚毎にずれて表示されていきます。

この指定のままですと、パソコン画面でも５枚表示、スマホ画面でも５枚表示になります。

画面サイズに合わせて全体のサイズも変わってくれます。なかなか秀逸。

ですが、さすがにスマホで５枚は見にくい。

そこで、レスポンシブのオプションを設定します。

レスポンシブウェブデザインに関する上記設定の説明です。

上の場合、画面サイズが最小〜４８０pxまでの場合 1枚表示、1枚づつ送り 481px〜600pxまでの場合 2枚表示、1枚づつ送り 601px〜1024pxまでの場合 3枚表示、1枚づつ送り 1025px以上の場合 5枚表示、1枚づつ送り全部1枚づつ送りになってますが、表示枚数毎に変えてもいいですね。

1025px以上が5枚になるのは、レスポンシブの設定の前にslideToShowオプションで5のデフォルト指定をしているからです。

その他、オプションは恐れ入りますが本家サイトを参照ください。また時間がある時に追記したいと思います。