slickのcentermodeで、真ん中のスライダー要素の挙動がおかしい時の対処方法

slickのcentermodeを使っていて、スライダーがループした時、また戻るボタンを押した時、真ん中のスライダー要素の挙動がおかしくなる。

この様な悩みを解決します。

cenermodeを使うと真ん中の要素に自動的に専用のクラス（.slick-active）が付与されます。

挙動がおかしくなる原因はそのクラスに独自のCSSを追加しており、戻るボタン・ループのアクション時にそのCSSが遅れて反映されるのが原因かと思われます。

本記事では、slickのcentermodeを使っていて挙動がおかしくなる時の対処方法を解説します。

jQueryでコードを追記

 //以下$sliderにスライダー要素のIDもしくはクラスを指定します。 
const $slider = $("#js-slider");
      $slider.on("beforeChange", (event, slick, currentSlide, nextSlide) => {
        $slider.find(".slick-slide").each((index, el) => {
          const $this = $(el),
            slickindex = $this.attr("data-slick-index");
          if (nextSlide == slick.slideCount - 1 && currentSlide == 0) {
            if (slickindex == "-1") {
              $this.addClass("is-active-next");
            } else {
              $this.removeClass("is-active-next");
            }
          } else if (nextSlide == 0) {
            if (slickindex == slick.slideCount) {
              $this.addClass("is-active-next");
            } else {
              $this.removeClass("is-active-next");
            }
          } else {
            $this.removeClass("is-active-next");
          }
        });
      });

上記コードをslickを動かしてるJS記述の後に追記しましょう。

$sliderには、centermodeを使用しているslickのクラス・IDを入れます。

上記コードを入れる事で、slickのcentermodeで自動付与されるクラスとは別にis-active-nextというクラスが付与されます。

CSSでis-active-nextクラスにプロパティを追加

//今まで使っていたCSS
.slickslider .slickslideritem.slick-active {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); 
}
//今回追加するCSS
.slickslider .slickslideritem.is-active-next {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); 
}

上記サンプルコードになります。slickのcentermodeで真ん中の要素にtransform: scale(1)を指定しています。

まず、指定していたCSSをまるっとコピーし、すぐ下にペーストします。

コピペしたCSSの.slick-activeクラスを全章で追加した.is-active-nextクラスに修正します

以上で完了です。

挙動が正常になっているか確認してみましょう。

まとめ

なせか、戻るボタンとループ時に挙動が変わるので筆者も四苦八苦していました。

本記事を参考に修正してみてください。

以上で解説を終わります。

slickのcentermodeで、真ん中のスライダー要素の挙動がおかしい時の対処方法

jQueryでコードを追記

CSSでis-active-nextクラスにプロパティを追加

まとめ

関連記事