WEB MEMO LOG

【jQuery】slickの「Center Mode」で中央を大きくする等した際に、2周目にがたつく場合の対応方法

よく使用させていただいているスライダープラグイン「Slick」。
「Center Mode」で中央部分を大きくする、中央以外を透過する等した場合、2周目にがたつく場合の対応方法をメモメモ。

const $slider = $("#js-slider");

// 左右の透過の2周目ががたつく対応
$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");
    }
  });
});

// スライダー
$slider.slick({
  centerMode: true
});

【参考】
・slickカルーセルのcenterModeで中央以外を透過にした場合に2周目からがたつく

関連記事