slick.jsを使ってスライドショーを作る

ARCHIVES/CREATE IT/WEB DESIGN

slick.jsを使ってスライドショーを作ってみましょう。

slick.jsはスピードやアニメーションなどをカスタマイズして好みのスライダーが作れるjQueryのライブラリです。

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

サンプル

サンプルを見てみましょう。

See the Pen
slick.jsを使ってスライドショーを作る by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

サンプルでは<ul>で作ったリストがスライダーになっています。

HTML

HTMLはこんな感じです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
  </head>
  <body>

    <ul>
      <li><img src="https://placehold.co/1920x1080/22a6b3/FFF" /></li>
      <li><img src="https://placehold.co/1920x1080/6ab04c/FFF" /></li>
      <li><img src="https://placehold.co/1920x1080/f0932b/FFF" /></li>
      <li><img src="https://placehold.co/1920x1080/f9ca24/FFF" /></li>
      <li><img src="https://placehold.co/1920x1080/be2edd/FFF" /></li>
    </ul>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
  </body>
</html>

<head>でslick.jsのCSSを読み込み、</body>の直上でjQuery本体とslick.jsを読み込んでいます。

CSS

CSSはSCSSを使っています。

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  width: 100%;
  margin: 2rem auto;
  padding: 0;

  li {
    margin: 0 0.1%;

    img {
      width: 100%;
    }
  }
}

*

ユニバーサルセレクタを使って要素があらかじめ持っているmarginとpaddingをリセットしています。slick.jsを実装するのに特に必要ありません。

ul

スライダー全体のスタイルを指定します。list-style: none;でリストマークを非表示にしています。

また、<li>は横並びになっていますが、slick.jsが動作すると自動で横並びになるのでdisplay:flex;などを使ってCSSで横並びにする必要はありません。

li

<li>の間隔を適切にするため、左右に0.1%のmarginを指定しています。

img

画像の横幅を<li>の大きさに合わせるためwidth: 100%;を指定しています。

JavaScript

JavaScriptはjQueryを使います。jQuery → slick.jsの順番で読み込んだら、その下にslick.jsを実行するコードを書いていきます。

$("ul").slick({
  dots: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  centerMode: true,
  autoplay: true,
  autoplaySpeed: 3000,
});

dots: true

ドットのインジケーターを下部に表示するためのオプションです。falseを指定すると非表示になります。

slidesToShow: 3

見えている要素の数を指定するオプションです。3であれば3つ見えている状態ということになります。

slidesToScroll: 1

1回でいくつの要素をスクロールさせるか調整できるオプションです。1であれば要素を1つずつスクロール、3であれば要素を3つずつスクロールします。

slidesToScroll: 3

centerMode: true

要素をセンタリングするオプションです。slideToShowのオプションに関係なく前後に1つずつ要素が見切れるようになります。

autoplay: true

自動でスクロールするかどうかを指定するオプションです。falseにすると自動スクロールしなくなります。

autoplaySpeed: 3000

スライダーが停止してスクロールを開始するまでの時間を指定できるオプションです。JavaScriptではミリ秒という単位を使うので、3000であれば3秒ということになります。

このオプションはautoplayがtrueの場合のみ有効になります。

HOME › KNOWLEDGE › WEB DESIGN › slick.jsを使ってスライドショーを作る