ENGINEER LABO


お知らせ NEWS

ブログ BLOG

制作実績 PORTFOLIO


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

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

HTMLCSS

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

slickスライド

 

こんにちは、佐藤先生 (@engneerlabo)です。
フリーランスWebデザイナー兼YouTuberをしています。
このブログでは、オリジナルサイトにスライダーを実装する「slick.js」の解説をします。

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

 

以上のような、スライダーの作り方に関するお悩みにお答えします。

この記事の内容

  • slick.jsのはじめかた準備編
  • 実際の記述方法
  • slick.jsのオプション設定
難しい記述を必要としない、スライダー作成に使えるプラグインといえば「slick」です。
佐藤先生

 

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の使い方についてまとめているので、こちらもチェックしてみてください。
佐藤先生

VSコードウェブデザイン初心者
ホームページ作成をする人は必見!VScodeのインストール方法と必須拡張機能9選!beautifyは神拡張機能なので使い方を覚えよう

  HTMLやCSSを編集するために初心者へおすすめしたい「VScode(Visual Studio Code)」。Microsoft社が提供しているコードエディタです。超軽量かつ豊富な拡張 ...

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