【jQuery】スライダープラグイン「slick」の使い方

このブログでは、オリジナルサイトにスライダーを実装する「slick.js」の解説をします。

こんにちは、佐藤優里(@enginnerlabo)です。
主にホームページ制作・講師をしています。

【経歴】
■Webデザイナー・SEO分析歴10年以上
■ココナラPRO認定者(https://coconala.com/services/1667244)
ランキング1位獲得経験有 | ご依頼件数290件以上 | 評価5.0
■国内有数の大規模メディア〇UMOにてSEOコンテンツディレクターとして従事
■自社運営サイトはたった25記事で月間17万PV達成
■TVを含む多数メディアに出演(株式会社宝島社出版STARTBOOK)

佐藤先生

ぺんぺん

スライダーってどうやって作るの？できれば難しい記述なく作れる方法を教えてください。

もし読み進めてみても分からないことがあれば1500円でレクチャーしています

佐藤先生

slick.jsとは

slick.jsとは、jQueryをベースとしたスライダー作成用プラグインです。IE8以上のブラウザに対応していて、カスタマイズ性が高いため国内外問わず利用されています。条件にかなうと、商用利用も可能なので後々、制作会社で導入したいと考えている人にもおすすめです。

slickを使えば何ができるのでしょうか。スライダーを作成するためのプラグインなので、真横にスライドするシンプルなスライダーをサイトに実装するのに使えます。カルーセルに関しては、豊富なオプションを利用すれば、自分なりのカスタマイズも可能です。

レスポンシブにも対応しているため、ブレイクポイントを設定すればスマホ・タブレット・PCそれぞれのデバイスに応じた表示をチェックできます。

slick.jsの使い方

jQueryがベースのプラグイン「slick」。実際に使ってサイトにスライダーを実装するにはどうすればいいのでしょうか。初心者向けにslickの使い方、事前準備について解説します。

slickを使えるようになるには、必要なファイルを読み込むかCDNを使って読み込まなければなりません。まずは、sliclの公式サイトにアクセスしてプラグインをダウンロードしましょう。

slick.jsのファイルをダウンロードして使う方法

slickでサイトにスライダーを実装するには、必要なファイルをダウンロードしなければなりません。slick.jsの公式サイトにアクセスして「Download Now」のボタンをクリックすれば、zipフォルダのダウンロードがスタートします。

フォルダの中身すべてがスライダーの実装に使えるわけではありません。サンプルファイルなどの不要なファイルも含まれているため、必要なファイルのみを読み込ませましょう。

slickのフォルダ内に入っている以下の5つは、Web製作で使うデータとして読み込みます。

上記5つのファイルがなければslickは正しく動作しません。

続いて、HTMLでjQueryとslickの読み込みを行います。コーディング内のファイルパスは自分なりの構成に適したものを設定しましょう。

＜headタグの中のHTML＞

<link rel="stylesheet" type="text/css" href="css/slick.css"/>
<link rel="stylesheet" type="text/css" href="css/slick-theme.css"/>

＜</body>の直前HTML＞

<script type="text/javascript" src="js/slick.js"></script>

slickを正しく動作させるためにはベースになっているjQueryを読み込ませなければなりません。</body>の直前で記述したHTMLの前に次のような記述を加えましょう。

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.js"></script>

HTMLでjQueryとslickを読み込むと準備万端です。しかし、正しく動作させるためにはさらにHTMLの記述が必要です。

「＄」部分は動作させたいスライダーのHTMLセレクタと一致するように設定してください。

slick.jsのCDNを使う方法

slickの実装するにはファイルを選別しなければならないこので、面倒に感じてしまう人もいるでしょう。しかし、slickのフォルダを一式ダウンロードしなくてもCDNを使えば実装できます。

slickの公式サイトからダウンロード画面にアクセスし「You can also use slick with the jsDelivr CDN!」の下にあるコードを取得しましょう。CDN用のコードをhead要素のHTML内にコピペすれば楽にスライダーを実装できます。

その場合、HTMLの記述は次のようになります。

CDNを使えば、ファイルをダウンロード数手間が省けますが、オンライン環境でしか動作しないためいつでもどこでもサイト制作の時間を作りたい人は注意してください。

slick.jsのオプション設定

slickが正しく動作するようになっても、デフォルト状態では装飾が不十分です。自動スライドやページネーションなどを実装したいならオプションを設定しましょう。

slickのオプションはたくさんあるので、自分なりにサイトのイメージに合ったカスタマイズを試してみてください。

＜slickのオプション一覧＞

slickを使ってスライダー実装するなら、リストタグの使用は控えましょう。自動的にタグが出力されるslickで<ul><li>を活用すると構造が崩れてしまいます。<div>を使ってコーディングしていきましょう。

slick.jsまとめ

slickの導入方法やカスタマイズに使えるオプションなどを説明しました。コーディング初心者でもスライダーを実装して、より見やすくデザイン性の富んだサイト制作が可能です。slickのオプションを活用して、自分なりのカスタマイズを楽しみましょう。

豊富な拡張機能を使いながらコーディングスキルをつけられるVScodeの使い方についてまとめているので、こちらもチェックしてみてください。

佐藤先生