jQuery

スライダープラグイン「slick」の紹介

2021年11月12日 by single コメントはまだありません

スライダープラグイン「slick」の紹介

写真をスライダー形式で表示させるプラグイン「slick」を紹介したいと思います。

導入方法

CDN

HTMLのhead内に必要なリスソースに対してリンクを設定すれば、簡単に導入できます。

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script><!-- 前提 jQuery -->
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script><!-- 前提 jQuery -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

『slick.min.js 』に関しては、読み込む前にjQueryのライブラリも読み込んでおいてください。

ダウンロード

ライブラリをダウンロードする場合には、まず、「slick」のページに行ってもらい、表示されたページの上のメニュー「get it now」をクリックしてください。

そうすると、『Download Now』ボタンが見えるようになるので、『Download Now』をクリックすれば、書庫ファイル（ZIP)をダウンロードできます。

書庫ファイルを展開すると以下のようなファイルが展開されます。

リンク

HTML内にダウンロードしたファイルに対してリンクを設定すれば、導入完了です。

ダウンロード書庫ファイル内の『slick』の中にあるファイルをロードしてください。

読み込むのは『slick.css』『slick-theme.css』、『slick.js』または『slick.min.js』を読み込んでください。

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

なお、jsファイルの読み込みには、jQueryの読み込みが必須です。

   <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   <script type="text/javascript" src="/assets/slick-1.8.1/slick/slick.min.js"></script>

利用方法

HTMLマークアップ

まず、スライダーを設定したい場合のHTMLのコーディング方法です。以下のようにdivでエリアを設定し、その下に各項目をまた、divで定義して下さい。

<div class="your-class">
  <div>項目１</div>
  <div>項目２</div>
  <div>項目３</div>
</div>

スライダーの初期化

スライダーの定義が終われば、あとは、slickで初期化すればよいだけです。

   <script type="text/javascript">
      $(document).ready(function(){
         $('.your-class').slick();
      });
   </script>

なお、デフォルト以外に、オプションも指定できます。

スライダープラグイン「slick」のサンプル

HTMLコード

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
   <title>slick demo</title>
   <link rel="stylesheet" type="text/css" href="/assets/slick-1.8.1/slick/slick.css"/>
   <link rel="stylesheet" type="text/css" href="/assets/slick-1.8.1/slick/slick-theme.css"/>
</head>
<body style="background-color:#D9D9D9;margin-left:50px;">
   <div id="slick1" style="width:400px">
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" title="うさぎ" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" title="ペンギン" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" title="カンガルー" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/turtle.jpg" title="亀" /></div>
   </div>

   <br />
   <div id="slick2" style="width:400px">
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" title="うさぎ" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" title="ペンギン" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" title="カンガルー" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/turtle.jpg" title="亀" /></div>
   </div>
   <br />
   <div id="slick3" style="width:1200px">
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/rabbit.jpg" title="うさぎ" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/penguin.jpg" title="ペンギン" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/kangaroo.jpg" title="カンガルー" /></div>
      <div><img src="https://www.single-life.tokyo/wp-content/uploads/2021/11/turtle.jpg" title="亀" /></div>
   </div>
   <br />
   <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
   <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
   <script type="text/javascript" src="/assets/slick-1.8.1/slick/slick.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         $('#slick1').slick();

         $('#slick2').slick({
            autoplay: true,
            autoplaySpeed: 500,
            arrows: false,
            dots: true,
            infinite: true,
            speed: 3000,
            fade: true,
            cssEase: 'linear',
         });

         $('#slick3').slick({
            slidesToShow: 3,
            infinite: true,
            autoplay: true,
            autoplaySpeed: 500,
            slidesToScroll: 2,
            focusOnSelect: true,
         });
      });
   </script>
</body>
</html>

デモ

オプション

slickではオプションを「settings」と言ってますね。

いくつか紹介します。

settings

accessibility

「false」にすると、パソコンだと矢印キーを操作してもスライドしなくなります。

デフォルトは「true」なので、スライドにフォーカスを当てて、矢印キーを動かすと、右向き矢印キーなら、次の項目へ、左向き矢印キーなら前の項目に戻ります。

adaptiveHeight

「true」にすると、項目の高さに合わせて、選択項目の高さが自動調整されます。

デフォルトは「false」ですので、高さは調整されません。

autoplay

「true」にすると、表示項目が自動的に切り替わります。

デフォルトは「false」です。

autoplaySpeed

autoplayが「true」の場合、選択されている項目が表示されている時間をミリ秒で定義できるオプションです。

デフォルトは「3000」（ミリ秒）（３秒）です。

arrows

項目を切り替えるための矢印アイコンを表示するかどうかのオプションです。

デフォルトは「true」で矢印アイコンは表示されます。

centerMode

「true」にすると、選択項目が中央になるようになります。

デフォルトは「false」です。

dots

「true」にすると、スライダーの下に、項目数分、直接項目を選択できるようなドットアイコンが表示されるようになります。

draggable

「true」にすると、ドラッグで項目を変更できるようになります。

デフォルトは「true」です。

fade

「true」にすると、選択項目変更時、“ジワッ”と切り替わるようになります。

デフォルトは「false」です。

infinite

「true」にすると、最後の項目に達しても、最初の項目に戻るようになります。

デフォルトは「true」です。

speed

表示項目が切り替わる速度をミリ秒で定義できるオプションです。

ミリ秒で指定で、デフォルトは「500」（０．５秒）です。

ご参考

関連ページ