Keen-Slider でレスポンシブに対応する

こんにちは、上條（mk-0A0）です。

先日スライダーの実装に Keen-Slider を使ったのですが、その際にレスポンシブってどうやるんだ…？となったので、試したことを書こうと思います。

Keen-Slider とは

スライダーを実装できるライブラリです。
JavaScript や React はもちろん、Vue, Angular にも対応しています。
そして依存関係が無いため 5.5KB と軽量なのも嬉しいところです。

公式通りに実装する

React の導入手順で実装してみます。

import { useKeenSlider } from 'keen-slider/react'
import 'keen-slider/keen-slider.min.css'

const KeenSlider = () => {
  const [sliderRef] = useKeenSlider({
    slides: {
      spacing: 50,
    },
  })

  return (
    <ul ref={sliderRef} className="keen-slider">
      {Array(...Array(6)).map((_, index) => (
        <li className="keen-slider__slide">
          {index}
        </li>
      ))}
    </ul>
  )
}

export default KeenSlider

keen-slider/keen-slider.min.css を読み込み、スライダーのコンテナ（ul）に keen-slider クラス、スライダー本体（li）に keen-slider__slide クラスを付与します。
そして Keen-Slider で用意されている useKeenSlider フックからコールバック関数 sliderRef を呼び出し、コンテナである ul の ref 属性に指定することで動作します。

スライダーのレイアウトは useKeenSlider の第一引数で設定できます。
今回はレスポンシブ対応として PC と SP でスライダー間の余白を変えたいので、slides: {spacing: 50} として余白を設定しました。

この段階ではまだレスポンシブに対応していません。

試したこと

SP では余白を狭めたかったので、useKeenSlider の slides は削除してCSS で指定してみました。

.keen-slider {
    gap: 50px;
}

@media screen and (max-width: 768px) {
    .keen-slider {
        gap: 10px;
    }
}

意図通りになっています。
しかし、CSS に頼らず Keen-Slider の機能を使う方がリーダブルになります。

解決方法

useKeenSlider の breakpoints という props を使ってレスポンシブ対応する方法がありました。
公式の Examples に従って記述すると以下のようになります。（ CSS は全て削除します。）

  const [sliderRef] = useKeenSlider({
    slides: {
      spacing: 50,
    },
    breakpoints: {
      '(max-width: 768px)': {
        slides: {
          spacing: 10,
        },
      },
    },
  })

breakpoints により、CSS 指定時と同様の挙動のまま意図通りの挙動になりました！

まとめ

はじめはレスポンシブに対応するには CSS を使うしか無いかと思っていましたが、breakpoints を使うことでリーダブルに実装できました。
実装の参考になれば幸いです。