slickのブレークポイント変更時に処理を追加する方法 #JavaScript

やりたいこと

ブレークポイントでスライダーの数が変わった時に高さを再調整したい

jquery.matchHeightで高さを調整しているが、デフォルトでは読み込んだ時にしか適用できていなかった。
そのため、画面サイズが切り替わってスライドの表示数が変わった時に高さが揃っていなかった。

ソース全体

/*
 * This file is use slick
 *
 * http://kenwheeler.github.io/slick/
 *
*/
import 'slick-carousel'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'
import '../../lib/jquery.matchHeight-min'

document.addEventListener('DOMContentLoaded', function () {
  itemSlider()
})

function itemSlider () {
  const slider = $('.slick-slide-list')
  slider.slick({
    accessibility: true,
    autoplay: false,
    speed: 400,
    draggable: true,
    fade: false,
    arrows: true,
    slidesToShow: 5,
    slidesToScroll: 5,
    swipe: true,
    vertical: false,
    adaptiveHeight: true,
    responsive: [
      {
        breakpoint: 1200,

      },
      {
        breakpoint: 896,
        settings: {
          slidesToShow: 4,
          slidesToScroll: 4,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        },
      },
    ],
  })
  $('.slick-slide .tw-item-list-body ').matchHeight()

  slider.on('breakpoint', function (event, slick, breakpoint) {
    $('.slick-slide .tw-item-list-body ').matchHeight()
  })
}

今回追加したのはレスポンシブ設定時のブレイクポイントに達した際にある任意の処理をするようにした。

slider.on('breakpoint', function (event, slick, breakpoint) {
    $('.slick-slide .tw-item-list-body ').matchHeight()
  })