jQueryのスライダー「slick」の使い方・オプションを徹底解説

Programming

今回は、jQueryのスライダー「slick」の使い方とオプションを徹底的に解説します。

インターネット上の解説が細いとこまで行き届いてない感じがしたので、当サイトでは初心者の方でも理解出来るように超基礎の基礎から見ていきます。

slickとは?

slickはjQueryベースの、スライダーを作成するためのプラグインです。

jQueryとは、JavaScriptを使いやすくまとめたライブラリです。要するにJavaScriptでスライダーを作成するデータです。

slickを使用すると、以下の様なカルーセルスライダーが超簡単に実装する事が出来ます。

WEB制作の現場では頻繁に使用するプラグインなので必ず覚えておきましょう。

slickの使い方 │ 下準備 ① ファイル構成

まずはslickを使用するための下準備(ファイルの準備)をします。

初めに、以下のリンクからslickのファイルをダウンロードして下さい。

https://kenwheeler.github.io/slick/

URLをクリックすると以下の様なページに飛びますのでグロナビの「get it now」をクリックして「Download Now」を押して下さい。ここでslickの全ファイルをダウンロード出来ます。

ダウンロードしたファイルの中には以下の様なファイルが入っています。その中の「slick」フォルダの中身を使用します。

「slick」フォルダをそのままWEBサイトの環境にアップしても良いですが使用するファイルは決まっている(内容が被っている)ので、今回使用する以下の4つのファイル以外は削除でOKです。

fontsフォルダslick-theme.css
slick.cssslick.min.js

先程の4つのファイルをWEBサイトの環境にアップロードします。今回の場合は「slick」フォルダに必要なファイルを入れてまとめています。
*slick-theme.cssとfontsフォルダは同じパス内に存在していないと正常に表示されないので注意しましょう。

そしてslickのオプション設定用ファイル「common.js」とjQuery読み込み用ファイルの「jQuery.js」を用意します。(jQueryはオンラインで読み込んでもOK)

ここまでのファイルの構成は以下です。

slickの使い方 │ 下準備 ② ファイルの読み込み

次にindex.htmlで各ファイルを読み込みます。

まずはjQueryを読み込みます。これがなければ始まりません。

先程のファイル構成の場合は以下の記述でOKです。

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

オンラインからjQueryを読み込む場合は以下。(Google CDNを使用)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

次にbodyの終了タグ直前で以下のslick.min.jsとオプション設定用に作成したcommon.jsを読み込みます。

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

最後にhead内に以下のCSSを読み込みます。「styles.css」で見た目の調整を行います。CSSの読み込みの優先度の関係上、必ず以下の順番で記述して下さい。

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

slickの使い方 │ 基本的な使い方

ファイルの読み込みが出来たら、早速スライダーを作成していきます。その基本的な使い方を解説します。

追加・編集していくファイルは「index.html」「styles.css」「common.js」です。それ以外は存在するだけで弄りはしません。

まずは以下のコードを見て下さい。これをコピペして各々調整すれば基本は出来ています。次で解説します。

HTML

<ul class="slick01">
      <li>
        <h3>コーディング</h3>
        <img src="img/htmlcss.jpg">
        <p>UI/UXを意識したデザインを作成</p>
      </li>
      <li>
        <h3>WEBデザイン</h3>
        <img src="img/uiux.jpg">
        <p>UI/UXを意識したデザインを作成</p>
      </li>
      <li>
        <h3>プログラミング</h3>
        <img src="img/system.jpg">
        <p>利便性のあるシステムを開発します</p>
      </li>
      <li>
        <h3>マーケティング</h3>
        <img src="img/marketing.jpg">
        <p>事業拡大を目指して最適安を提案します</p>
      </li>
      <li>
        <h3>コンサルティング</h3>
        <img src="img/consaru.jpg">
        <p>あなたのお悩みを解決します</p>
      </li>
    </ul>

CSS

.sliderArea {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 25px;
}

.sliderArea.w300 {
  max-width: 300px;
}

.slick-slide {
  margin: 0 5px;
}

.slick-slide img {
  width: 100%;
  height: auto;
}

.slick-prev {
  z-index: 100;
  left: 15px;
  top: 270px;
  width: 30px;
  height: 30px;
}

.slick-next {
  z-index: 100;
  right: 15px;
  top: 270px;
  width: 30px;
  height: 30px;
}

.slick-prev:before, .slick-next:before {
  color: #000;
  z-index: 9;
  font-size: 30px;
}

.slick-slide {
  transition: all ease-in-out .3s;
}

.slick-active {
  opacity: 1;
}

.slick-current {
  opacity: 1;
}

.thumb {
  margin: 20px 0 0;
}

.thumb .slick-slide {
  cursor: pointer;
}

.thumb .slick-slide:hover {
  opacity: .7;
}

.slick-slide {
  outline: none;
}

JavaScript

$('.slick01').slick({      //{}を入れる
        autoplay: true,   //「オプション名: 値」の形式で書く
        dots: true,      //複数書く場合は「,」でつなぐ
        slidesToShow: 3,
        slidesToScroll: 1,
        responsive: [{    //ここからスマホ時
          breakpoint: 768, 
          settings: {
            dots: true,
            slidesToShow: 1,
            slidesToScroll: 1,          
            autoplay: true
           }
       }]
      });

まずHTMLでは、スライダーにしたい要素の親要素に「class="slick01″」と任意のクラス名を付けておきます。そのクラス名をJavaScriptの1行目の$('.slick01’)の部分に当て嵌めます。これでHTML内のslick01の要素がスライダーになります。あとはオプションとスタイルを好きに追加・編集しているだけです。

slickの使い方 │ オプション

オプションは追加したcommon.jsに入れていきます。$('.slick01’).slick({ })の{}の中にオプションを追記していきます。

以下は、slickのオプションです。よく使用されるオプションはマーカーを付けておきます。

表示に関するオプション

項目デフォルト仕様
arrowstrue左右矢印を表示する
dotsfalseドット(ページ送り)を表示する
slidesToShow1スライダーの表示数
slidesToScroll1一度にスライドする数
adaptiveHeightfalsetrueの場合、高さ可変。faleseの場合、高さ固定。
centerModefalseセンターモード(=両端見切れ状態)になる
centerPadding’50px’  センターモード時、見切れたコンテンツの幅をpx指定できる
asNavFornullスライダーを他のスラーダーのナビゲーションとして連携する

動きに関するオプション

項目デフォルト仕様
infinitetrue無限にスライドする
fadefalsetrueの場合、スライド切り替え時にフェードインアウトする (vertical:trueと動作が不安定になる)
speed300フェードのスピード
autoplayfalsetrueの場合、自動再生する
autoplaySpeed 3000自動再生時のスライド切り替えのスピード
verticalfalse縦方向にスライドする

ユーザーの操作に関するオプション

項目デフォルト仕様
accessibility             trueタブまたは矢印でスライド切り替えができる
swipetrueスワイプできる
verticalSwiping   false垂直方向にスワイプできる【
focusOnSelect             falsetrueの場合、コンテンツをタッチすると中央にフォーカス(=移動)する。中央のコンテンツをタッチしても動きはない。
pauseOnHovertrueマウスオーバー中は、スライドを停止する
pauseOnFocustrueスライダをフォーカス(ドットのクリック)した時に自動再生を一時停止する

カスタマイズのためのオプション

項目デフォルト仕様  
prevArrow<button type="button" class="slick-prev">Previous</button>前矢印のHTMLカスタマイズ
nextArrow<button type="button" class="slick-next">Next</button>後矢印のHTMLカスタマイズ

レスポンシブ

項目デフォルト仕様
responsive——画面幅でオプションの設定を変更できる
breakpoint——画面幅の指定(指定px以下に適応する)
settings——この中に変更したいオプションを設定する

以上が「jQueryのスライダー「slick」の使い方・オプションを徹底解説」でした。

三浦圭人

最後まで閲覧頂きありがとうございます。
Twitterでは更に細かくWEBリテラシーのネタを発信しています。是非フォローお願い致します。感想/ご意見頂けたら喜びます✨

2020年12月29日ProgrammingJavaScript,jQuery,WEB

Posted by KT