slickのパラメータを使って正方形のスライドをつくる

こんにちは、ウェブエンジニアのmasakichiです。
需要があるかわからない程度のtipsなどを書いています。
今回はslick.jsです。

なにが書いてある？

slick.jsといえば多機能なスライダーを簡単に実装できるjQueryベースのプラグインです。
そんなslick.jsを使いつつ、スライド画像を正方形に整える方法を書きました。

相当特殊な要件でなければ、とりあえずslick使っとけばなんとかなるので、普段から愛用しています。
jQuery依存から脱却すべし！とか言わないでください

さっそく完成形

See the Pen slick-item square by masakichi (@masakichi) on CodePen.

こんな感じです。
スライドする画像がしっかりと正方形になっています。猫がかわいいです。

なにが大変だったのか

slickを使うにあたって、まずはHTMLから記述すると思います。今回は下記のような一般的なHTMLを用意しました。
.slide_itemがスライド要素となります。

HTML

<div class="slide">
    <div class="slide_item">
      <img src="hoge/img01.jpg" alt="neko01">
    </div>
    <div class="slide_item">
      <img src="hoge/img02.jpg" alt="neko02">
    </div>
    <div class="slide_item">
      <img src="hoge/img03.jpg" alt="neko03">
    </div>
    <div class="slide_item">
      <img src="hoge/img04.jpg" alt="neko04">
    </div>
  </div>

最初は.slide_itemにpadding-top:１００％;などを指定すればいけるのでは？と思いました。

しかし、slickが生成する.slide_itemの親要素.slick-trackにwidthが自動スタイリングされてしまいます。

その関係で、スライドのアイテム要素にpadding-top:１００％;などを指定しても、うまく正方形になってくれませんでした。

そこで、うまいことスライド要素の横幅を取得して、そのまま高さとしてスタイリングすることはできないかなと模索してみました。

#スライド要素.slide_itemの横幅を取得する
JavaScript側で取得します。下記サンプルコードです。

【要点】

1. .slick-slideの横幅を取得するにはsetPositionというslickで用意されているイベントを利用します
2. setPositionを使うと、ロード時やリサイズ時などに毎回イベントが発火されるようになります。
3. setPositionにはevent,slickの2つのパラメータが渡せるので、これらをsetCSSという関数に渡します。
4. パラメータslickから、.slick-slideの横幅が取得できるので、その値をpadding-topとしてスタイリングする

class Slick {
    constructor(){
        this.$view = $('.slide');
        this.runSlick();
    }
    runSlick(){
        this.$view.slick({
            arrows: false,
            autoplay: true
        })
        //slickの再計算時にイベント発火、setCSS関数を呼び出す
        .on('setPosition',(e,slick)=>{this.setCSS(e,slick)});
    }
    setCSS(e,slick){
        //引数slickからスライド要素の横幅が取得可能
        let slideWidth = slick.listWidth;
        this.$view.find('.slide_item').css('padding-top',slideWidth+"px");
    }
}

new Slick();

#CSSでobject-fitで正方形にスタイリングする

JavaScriptでpaddingのスタイリングが適用されているので、下記のようにCSSを記述します。

SCSS

.slide{
    max-width: 200px;
    margin: 0 auto;
    &_item{
        position: relative;
        img{
            position: absolute;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }
}

これで無事に正方形の完成です。

参考リンク先

Slickドキュメント