このブログでは、オリジナルサイトにスライダーを実装する「slick.js」の解説をします。
こんにちは、佐藤優里(@enginnerlabo)です。
主にホームページ制作・講師をしています。
【経歴】
■Webデザイナー・SEO分析歴10年以上
■ココナラPRO認定者(https://coconala.com/services/1667244)
ランキング1位獲得経験有 | ご依頼件数290件以上 | 評価5.0
■国内有数の大規模メディア〇UMOにてSEOコンテンツディレクターとして従事
■自社運営サイトはたった25記事で月間17万PV達成
■TVを含む多数メディアに出演(株式会社宝島社出版STARTBOOK)
この記事の内容
- slick.jsのはじめかた準備編
- 実際の記述方法
- slick.jsのオプション設定
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製作で使うデータとして読み込みます。
- fontsフォルダ
- ajax-loader.gif
- slick.css
- slick-theme.css
- slick.js
上記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の記述が必要です。
<slickを動かすためのHTML>
<div class="slider">
<div class="image"><img src="img.jpg"></div>
<div class="image"><img src="img.jpg"></div>
<div class="image"><img src="img.jpg"></div>
</div>
<script>
$('.slider').slick();
</script>
「$」部分は動作させたいスライダーのHTMLセレクタと一致するように設定してください。
slick.jsのCDNを使う方法
slickの実装するにはファイルを選別しなければならないこので、面倒に感じてしまう人もいるでしょう。しかし、slickのフォルダを一式ダウンロードしなくてもCDNを使えば実装できます。
slickの公式サイトからダウンロード画面にアクセスし「You can also use slick with the jsDelivr CDN!」の下にあるコードを取得しましょう。CDN用のコードをhead要素のHTML内にコピペすれば楽にスライダーを実装できます。
その場合、HTMLの記述は次のようになります。
<headタグの中のHTML>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
</body>の直前HTML>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
CDNを使えば、ファイルをダウンロード数手間が省けますが、オンライン環境でしか動作しないためいつでもどこでもサイト制作の時間を作りたい人は注意してください。
slick.jsのオプション設定
slickが正しく動作するようになっても、デフォルト状態では装飾が不十分です。自動スライドやページネーションなどを実装したいならオプションを設定しましょう。
slickのオプションはたくさんあるので、自分なりにサイトのイメージに合ったカスタマイズを試してみてください。
<slickのオプション一覧>
オプション名 | デフォルト値 | 使える値や仕様 |
---|---|---|
speed | 300 | スライドの切り替えにかける時間の設定 ※ デフォルトの300は切り替えに0.3秒間かける |
autoplay | false | 自動再生 『true』の値で自動再生する |
autoplaySpeed | 3000 | 自動再生時のスライドスピード ※ 3000は3秒間表示 |
infinite | true | スライドのループ設定 『false』を入れるとループしなくなる |
vertical | false | 縦方向(下から上)にスライド ※ fadeのオプションが『true』は不可能 |
fade | false | スライドの切り替えをフェードイン・フェードアウトに切り替え |
easing | ‘linear’ | jQueryのイージングを文字列形式で設定 |
cssEase | ‘ease’ | CSS3のAnimationEasingで設定 |
useCSS | true | CSSのtransitionの有効化 |
useTransform | true | CSSのtransformの有効化 |
rows | 1 | スライダーの行数を設定 |
slidesPerRow | 1 | rowsの値が2以上のとき、1行に表示するスライド数を設定 |
variableWidth | false | スライド幅の自動計算無効化 |
rtl | false | スライドの向きを変更 |
slickを使ってスライダー実装するなら、リストタグの使用は控えましょう。自動的にタグが出力されるslickで<ul><li>を活用すると構造が崩れてしまいます。<div>を使ってコーディングしていきましょう。
slick.jsまとめ
slickの導入方法やカスタマイズに使えるオプションなどを説明しました。コーディング初心者でもスライダーを実装して、より見やすくデザイン性の富んだサイト制作が可能です。slickのオプションを活用して、自分なりのカスタマイズを楽しみましょう。
-
ホームページ作成をする人は必見!VScodeのインストール方法と必須拡張機能9選!beautifyは神拡張機能なので使い方を覚えよう
このブログでは、VScodeのインストール方法と必須拡張機能9選について解説していきます。 こんにちは、佐藤優里(@enginnerlabo)です。主にホームページ制作・講師をしています ...