slick.jsをwebpackで使いこなす

この記事の意図

この記事の意図は、スライダーを実装する機会が多すぎて、毎度毎度ソースを書くのが面倒なので、ここからコピペして使えるようにしちゃおううという意図です。

記事の内容は随時更新していこうと思います。

ベースのHTML

最近はずっとPugで書いているので、Pugのソースを載せておきます。


.p-slider
  ul.p-slider__list.js-slider
    li.p-slider__list__items
      a(href="#")
        img(src="https://placehold.jp/ba4ac2/ffffff/982x404.png", alt="")
    li.p-slider__list__items
      a(href="#")
        img(src="https://placehold.jp/2b93b5/ffffff/982x404.png", alt="")
    li.p-slider__list__items
      a(href="#")
        img(src="https://placehold.jp/415e27/ffffff/982x404.png", alt="")

同サイトの中に複数スライダーを設置する(可能性がある)場合は、クラス名は独自のものにしておくとよいです。

slickをインストール

npmからインストールします。以下のコマンドを実行。

npm公式サイトに使用方法も掲載があるので確認すると良いです。


npm i slick-carousel

jQueryの記述

まずnpm installしたslickを読み込ませます。


import "slick-carousel";

読み込みのあとにslickを発火させる記述をします。


$(".js-slider").slick({
  dots: true,
  speed: 500
});

オプションのカスタマイズはこちらの記事が参考になりました。

CSS

CSSは「/node_modules/slick-carousel/slick/ 」フォルダの中にインストールされているのですが、カスタマイズしづらいので、私は普通にscssファイルの1つとして読み込ませます。

CSS(scssも入ってます)ファイルは公式Githubからダウンロードすることが可能です。

CSSのカスタマイズ方法についは順次こちらの記事の内容をを更新していきます。

参考にさせていただいた記事

今回参考にさせていただいた記事はこちらです。ありがとうございました。

related article

2019/12/10 JavaScript

slickで現在のページ数 / 総ページ数を表示させる

2019/10/08 JavaScript

ヘッダー固定時にアンカーリンクがヘッダー分ずれる

2019/12/06 JavaScript

area要素で地図をホバーした時に色を付ける方法

2019/10/15 JavaScript

Windowサイズが変わった時に行う処理