slick.jsで無限ループのサムネイルを設定し、2周目に入ると表示がガタつく。

Question

実現したいこと

ここに実現したいことを箇条書きで書いてください。

• slick.jsで作ったカルーセルのサムネイルが2周目に入るときにガタつくバグを直したい

前提

ここに質問の内容を詳しく書いてください。
現在、slick.jsでカルーセルスライダーを作っています。
要件は
・slick.jsでメインビジュアルを作る
・メインビジュアルに対するサムネイルもslick.jsで作る
・pcではサムネイルが並んでいるだけだがSPでは無限ループする
・サムネイルをクリックすると連動してメインビジュアルが切り替わる
です。

発生している問題・エラーメッセージ

codepenに記載していますが、SPで見たときにサムネイルが2周目に入ると
・ガタツキが起こる
・slick-currentより前の要素が一瞬見える
というバグが発生しています。

該当のソースコード

html/css/jsどれが駄目なのか分からなかったためcodepenで記載いたしました。

https://codepen.io/nari-dsn/pen/jOdgJoP

試したこと

下記に記載の対処方法は試してみたのですが、全て駄目でした…
slideToShowオプションは1を設定しているのでこれらも対処法とは違っているかも知れません。
https://qiita.com/daipdaip/items/d2fbcc6e47cfd4cd619a
https://masakichi-code.com/blog/slick_lap2_flickering/
https://teratail.com/questions/126058
https://www.sfidax.okinawa/sfidax_okinawa_wp/column/slick-slidestoshow-not-working/

補足情報（FW/ツールのバージョンなど）

利用しているslick.jsはver1.8.1です。

Comments

[Lhankor_Mhy]

スライドの途中で .slick-current が動いてしまっているのが原因だと思うので、beforeChange で何かしらをすれば上手くいくかもしれません。

[nur_tour]

なるほど・・・！ありがとうございます、beforeChangeで.slick-currentを操作するのはできそうです。試してみたいと思います。

Answer 1

codepen のコードを以下のように変更したところ、多少改善が見られました。

$(function () {
  const slickImageCount = $('.mv_slider .mv_sliderItem').length;
  const $mvCarousel = $('.mv_slider');
  const $mvThumbnail = $('.mv_thumb');
  const $mvToggle = $('.mv_toggle');
  const progressDuration = 4000;

  const mainCarouselConfig = {
    pauseOnFocus: false,
    pauseOnHover: false,
    focusOnSelect: false,
    draggable: true,
    infinite: true,
    dots: false,
    slidesToShow: 1,
    slidesToScroll: 1,
    autoplay: true,
    speed: 500,
    autoplaySpeed: progressDuration,
    fade: true,
    arrows: false,
    asNavFor: '.mv_thumb',
  };
  const thumbnailCarouselConfig = {
    fade: false,
    infinite: false,
    centerMode: false,
    slidesToShow: parseInt(slickImageCount),
    slidesToScroll: 1,
    asNavFor: '.mv_slider',
    arrows: false,
    pauseOnDotsHover: false,
    speed: 500,
    dots: false,
    adaptiveHeight: false,
    variableWidth: true,
    focusOnSelect: true,
    responsive: [{
      breakpoint: 768,
      settings: {
        fade: false,
        infinite: true,
        centerMode: false,
        adaptiveHeight: true,
        variableWidth: true,
        slidesToShow: 1,
        slidesToScroll: 1,
      },
    }],
  };

  $mvCarousel.slick(mainCarouselConfig);
  $mvThumbnail.slick(thumbnailCarouselConfig)
  .on('beforeChange', function(slick,currentSlide,nextSlide) {
    if (nextSlide===2) $(slick.currentTarget).addClass('beforeChange')
  })
  .on('afterChange', function(slick,currentSlide,nextSlide) {
    $(slick.currentTarget).removeClass('beforeChange')
  })
  _setupToggleHandler($mvToggle, $mvCarousel);

  function _setupToggleHandler($mvToggle, $mvCarousel) {
    $mvToggle.on('click', (e) => {
      const _class = 'js-pause';
      const _target = $(e.currentTarget).closest('.mv');
      const _isPause = _target.hasClass('js-pause');

      _isPause ? _target.removeClass(_class) : _target.addClass(_class);

      if (_isPause) {
        $mvCarousel.slick('slickPlay');
      } else {
        $mvCarousel.slick('slickPause');
      }
    });
  }
});

@mixin mobileView() {
  @media screen and (max-width: 767px) {
    @content;
  }
}

@mixin desktopView() {
  @media screen and (min-width: 768px) {
    @content;
  }
}
@mixin lineHeight($line-height) {
  &::before,
  &::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
  }
  &::before {
      margin-top: calc((1 - #{$line-height}) * 0.5em);
  }
  &::after {
      margin-bottom: calc((1 - #{$line-height}) * 0.5em);
  }
}

.mv {
  @include mobileView() {
    padding: 5.3%;
  }
  @include desktopView() {
    max-width: 1360px;
  }
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;

  .mv_notification {
    position: absolute;
    width: fit-content;
    height: fit-content;
    top: 32px;
    right: 38px;
    z-index: 10;
  }

  .mv_banner {
    & + & {
      margin-top: 4px;
    }
    border-radius: 8px;
    overflow: hidden;
    width: 304px;
    height: 84px;
    box-sizing: content-box;
    border: 4px solid rgba(255, 255, 255, 0.2);
    @include mobileView() {
      width: auto;
    }

    a {
      display: flex;
      font-size: 1.2rem;
      background: #fff;
    }

    img {
      width: 84px;
      height: 84px;
    }

  }

  .mv_slider .slick-slide * {
    @include mobileView() {
      width: 100%;
      aspect-ratio: 9 / 16;
    }
  }

  .mv_thumb {
    @include desktopView() {
      right: 38px;
      bottom: 28px;
    }
    @include mobileView() {
      left: calc(5.3% + 80px);
      bottom: calc(5.3% + 40px);
    }
    position: absolute;

    .slick-track {
      @include desktopView() {
        display: flex;
        align-items: baseline;
        width: fit-content !important;
        transform: none !important;
      }
    }

    .slick-list {
      @include mobileView() {
        overflow: visible !important;
        transform: none !important;
      }
    }

    .slick-slide {
      @include mobileView() {
        height: auto !important;
        -webkit-backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
        width: 115px;
        margin-left: 8px;
      }
      @include desktopView() {
        flex: 1;
        width: 144px;
        margin-left: 12px;
      }
          height: auto!important;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
			cursor: pointer;
      transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
    }

    .slick-slide:not(.slick-current ~ .slick-slide):not(.slick-current) {
      @include mobileView {
        visibility: hidden !important;
        opacity: 0 !important;
      }
    }

    .mv_thumb_inner {
      border-radius: 8px;
      overflow: hidden;
      position: relative;
    }

    .mv_thumb_progress {
      display: none;
      position: absolute;
      bottom: 0;
      height: 4px;
      background-color: #ffffff;
      width: 0%;
      border-radius: 10px;
    }

    .mv_thumb_lead {
      bottom: 16px;
      left: 16px;
      color: #600624;
      display: block;
      font-size: 1.4rem;
      position: absolute;
      white-space: nowrap;
      font-family: "reuben";
      font-weight: 600;
      letter-spacing: 0.02em;
      width: calc(100% - 32px);
      display: flex;
      justify-content: space-between;

      em {
        @include mobileView() {
          transform: scale(.8);
          transform-origin: left bottom;
        }
      }

      * {
        font-style: normal;
      }
    }
		.mv_thumb_lead [class^="lead_"]{
			display: none;
		}
		.mv_thumb_lead .lead_sp {
			@include mobileView() {
				display: block;
			}
		}
		.mv_thumb_lead .lead_pcPast{
			@include desktopView() {
				display: block;
			}
		}

		.slick-current,
    .slick-current+.slick-slide+.slick-slide+.slick-slide
    {
			@include mobileView() {
				transform: scale(1.2);
				transform-origin: bottom right;
			}
			@include desktopView() {
				flex: 1.2;
			}
			transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) 0s;
			img {
				width: 100%;
			}
			.mv_thumb_progress {
				display: block;
				animation: progress 4.5s linear forwards;
			}
			.mv_thumb_lead .lead_pcPast {
				display: none;
			}
			.lead_pcCurrent {
				@include desktopView() {
					display: block;
				}
			}
		}
  }

  .beforeChange .slick-slide:not(.slick-current+.slick-slide+.slick-slide ~ .slick-slide){
    @include mobileView {
      visibility: hidden !important;
      opacity: 0 !important;
    }
  }


  .mv_button {
    @include desktopView() {
      bottom: 24px;
      left: 24px;
    }
    @include mobileView() {
      bottom: calc(5.3% + 16px);
      left: calc(5.3% + 16px);
    }
    position: absolute;
    z-index: 100;
    button {
      width: 26px;
      height: 26px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.20);
      color: black;
      border: none;
      position: relative;
      padding: 2px 8px 2px;
    }
  }

  .mv_toggle_icon {
    &::before,
    &::after {
      position: absolute;
      top: 0;
      display: block;
      width: 3px;
      height: 10px;
      content: '';
      background: #ffffff;
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
    }
    width: 10px;
    height: 10px;
    display: block;
    position: relative;
  }
}

// 一時停止時
.js-pause {
  .mv_slider .slick-slide.slick-current *,
  .mv_thumb .slick-current .mv_thumb_progress {
    animation-play-state: paused;
  }

  .mv_toggle_icon {
    &::before {
      display: none;
    }
    &::after {
      width: 0;
      height: 0;
      border-width: 5px 0 5px 9px;
      border-style: solid;
      border-color: transparent transparent transparent #ffffff;
      background: transparent;
    }
  }
}

@keyframes progress {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@keyframes scale {
  from {
    transform: scale(1.03);
  }
  to {
    transform: scale(1);
  }
}

Comments

[nur_tour]

詳細にコードまで提供いただきありがとうございます・・・！
かなり改善されました。slick-current slick-activeをなんとかすればチラつきも解消できそうです。
自分でも書いてみて試してみようと思います。

[nur_tour]

頂いたコードをもとに改変し無事にバグが解消できました！ありがとうございました…！