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クラスに修正します
以上で完了です。
挙動が正常になっているか確認してみましょう。
まとめ
なせか、戻るボタンとループ時に挙動が変わるので筆者も四苦八苦していました。
本記事を参考に修正してみてください。
以上で解説を終わります。
目次