【jQuery】スライダープラグインslickを使ってみた

slickとは

jQueryスライダープラグインでNo1の評価を得ているプラグイン。 レスポンシブ対応, マウスでスライドが可能, 無限ループなど様々なオプションが用意されている。

How To

導入

公式サイトからファイルをダウンロード。

slick公式ページ

jsDelivrでCDNでホストされているので、今回はこいつを利用。 以下のファイルを読み込むことで利用可能になる。

• slick-theme.css
• slick.css
• slick.min.js

<link href="js/slick-theme.css" rel="stylesheet" type="text/css">
<link href="js/slick.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
<script type="text/javascript" src="js/slick.min.js"></script>

また今回の開発ではTypescriptを使用しているので、型定義ファイル(d.tsファイル)が必要になる。

使い方

<ul class="slider">
    <div><img src="images/01.jpg" alt="image01"></div>
    <div><img src="images/02.jpg" alt="image02"></div>
    <div><img src="images/03.jpg" alt="image03"></div>
    <div><img src="images/04.jpg" alt="image04"></div>
    <div><img src="images/05.jpg" alt="image05"></div>
    <div><img src="images/06.jpg" alt="image06"></div>
</ul>

sliderクラスに写真を設定し

$('.slider').slick();

この 1行だけで基本的なスライダーは完成！！

基本的なスライダー

オプション

slickには様々なオプションが用意されていている。 オプションは以下のように記述する。

$('.slider').slick() {
    OptionName: Value
}

こいつが今回、使用したオプション。

オプション	概要	初期値
autoplay	自動再生するかどうか	true
prevArrow	左の矢印ボタンのHTMLをカスタマイズ	<button type=”button” class=”slick-prev”>Previous</button>
nextArrow	右の矢印ボタンのHTMLをカスタマイズ	<button type=”button” class=”slick-next”>Next</button>
dots	ドットインジケーターを表示するか	false
infinite	スライドのループを有効にするか	true
initialSlide	スライドの開始番号	0

困ったこと

ページをロードした際に一瞬画像が縦並びになってしまう

よし！できた！と思っていざ表示すると、少し時間が経つとちゃんとスライダーになるけど、一瞬画像が縦並びになってしまう。。。

課題はslick用のCSSが適用されるタイミングにあった！！ HTMLはシンプルなこのような記述だが

<ul class="slider">
    <div><img src="images/01.jpg" alt="image01"></div>
    <div><img src="images/02.jpg" alt="image02"></div>
    <div><img src="images/03.jpg" alt="image03"></div>
</ul>

実際に出力されるHTMLは、js側の

$('.slider').slick();

の実行によって、新しい要素やCSSが割り当てられる。

<div class="slider slick-initialized slick-slider">
    <div class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 3000px; transform: translate3d(-2000px, 0px, 0px); transition: transform 800ms ease;">
            <div class="slick-slide" data-slick-index="0" aria-hidden="true" tabindex="-1" style="width: 1000px;">
                <img src="images/01.jpg" alt="image01" alt="slide1">
            </div>
            <div class="slick-slide" data-slick-index="1" aria-hidden="true" tabindex="0" style="width: 1000px;">
                <img src="images/02.jpg" alt="image02" alt="slide2">
            </div>
            <div class="slick-slide slick-current slick-active" data-slick-index="2" aria-hidden="false" tabindex="-1" style="width: 1000px;">
                <img src="images/03.jpg" alt="image03" alt="slide3"></div></div></div>
            </div>
以下省略

つまり、jsの実行を待たないとclassが付与されずCSSが適用されないので縦並びになってしまう！！ これを解決するために、CSSを使って

1. 最初はスライダーを非表示にする
2. jsの実行が終わったら表示する

という方法で解決した！

.slider {
    display: none;
}
.slider.slick-initialized {
    display: block;
}

実際にjsにより新しい要素やCSSが割り当てられら出力された"skick-intialized"に注目した。

<div class="slider slick-initialized slick-slider">

こいつはスライダーが初期化した時点で付与されるclass。 slider slick-intializedが一緒に付与されないと、表示しないという方法で解決した！