ENGINEER LABO


お知らせ NEWS

ブログ BLOG

制作実績 PORTFOLIO


人の可能性が、
次の世界を
つくる

ファーストビュー ファーストビュー ファーストビュー
ファーストビュー
ファーストビュー
       

HTMLCSS

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

オリジナルサイトにスライダーを実装したいけど何を使えばいんだろう、と悩んでいませんか?難しい記述を必要としない、スライダー作成に使えるプラグインといえば「slick」です。

自分のサイトに「slick」を設定し、使う方法やカスタマイズ方法について解説しましょう。自分好みにコーディングして、サイトの性能をレベルアップさせたい人はぜひ参考になさってください。

slick.jsとは

(画像例)

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

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

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

slick.jsの使い方

(画像例)https://gyazo.com/0e624ee6f3eb93acdd4ca46bc2c633f1

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のオプションを活用して、自分なりのカスタマイズを楽しみましょう。

© 2022 エンジニアラボ【ワードプレスのテーマ構築を制作実績200件以上の現役ウェブデザイナーが初心者に分かりやすい制作テクニックを教えます】 Powered by AFFINGER5