jQueryプラグイン「slick」実装、ループ時（2周目へのスライド時）のカクツキを無くしたい

現在WordPressにて、サイトを制作しております。

その際に、slick.jsを使用しスライダーにて画像とテキストボックスがを囲った<div>要素を3枚スライドさせております。
slickでのオプションでcentermodeを指定し真ん中のアクティブスライドには、色味を出し、サイドのチラ見要素にはグレースケールと要素サイズを小さくするようにしており、真ん中にくるとtransitionによりなめらかに色味が付き、サイズも大きくなるのですが、2週目に差し掛かるときにカクっと不自然に全て処理をしてしまいます。

該当のソースコード

jQuery

jQuery(function() {
  jQuery('#mypattern').slick({
    autoplay: true,
    autoplaySpeed: 2500,
    speed: 1000,
    arrows: true,
    centerMode: true,
    dots: true,
    slidesToShow: 1,
    focusOnSelect: true,
    pauseOnHover: true,
    responsive: [
      {
        breakpoint: 2000,      //
        settings: {
          centerPadding: '20%',
        }
      },
      {
        breakpoint: 1700,      //
        settings: {
          centerPadding: '14%',
        }
      },
      {
        breakpoint: 1440,      //
        settings: {
          centerPadding: '10%',
        }
      },
      {
        breakpoint: 1024,     //
        settings: {
          centerPadding: '5%',
        }
      },
      {
        breakpoint: 600,      //
        settings: {
          centerMode: false,
        }
      },
    ],
  });
});

HTML

<div id="mypattern" class="slider">
	
<div class="slide-list">
<div class="slide-img">
<img src="XXX" alt="XXX">
</div><!-- intro-item-text-img -->
<div class="text-box">
<div class="text-box-inner">
<p></p>
</div><!-- intro-text-box-inner -->
</div><!-- intro-item-text-box -->
</div><!-- intro-item -->

<div class="slide-list">
<div class="slide-img">
<img src="XXX" alt="XXX">
</div><!-- intro-item-text-img -->
<div class="text-box">
<div class="text-box-inner">
<p></p>
</div><!-- intro-text-box-inner -->
</div><!-- intro-item-text-box -->
</div><!-- intro-item -->

<div class="slide-list">
<div class="slide-img">
<img src="XXX" alt="XXX">
</div><!-- intro-item-text-img -->
<div class="text-box">
<div class="text-box-inner">
<p></p>
</div><!-- intro-text-box-inner -->
</div><!-- intro-item-text-box -->
</div><!-- intro-item -->


</div>
</div>

CSS

#mypattern{
width: 100%;
}
#mypattern .slick-slide{
margin: 20px;
/* transition: 1s !important; */
}
@media screen and (min-width: 769px) {
  #mypattern .slick-slide:not(.slick-center) {
  -webkit-filter: grayscale(70%);
  -moz-filter: grayscale(70%);
  -o-filter: grayscale(70%);
  -ms-filter: grayscale(70%);
  filter: grayscale(70%);
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  -ms-transform: scale(0.9);
  -o-transform: scale(0.9);
  transform: scale(0.9);
  }
}

.slide-list {
  transition: .8s;
  transform: translate3d(0,0,0);
  position: relative;
}
.intro-item:hover {
  box-shadow: 0 0 10px #454545;
  transition: .8s;
}

.text-box {
  float: left;
  height: 100%;
  width: 28.57em !important;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.text-box-inner {
  padding: 0 3em;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.slide-img {
  float: right;
  width: calc(100% - 28.57em) !important;
}

試したこと

transform: translate3d(0,0,0);を各要素に指定してみたりしましたが、特に変化はありませんでした。

初心者で、説明などが下手で誠に申し訳ありませんが、
非常に困っておりますので、誠にお手数ですがどなたかご指摘頂けますと有難く思います。

宜しくお願い致します。

Bonito_Bonito

2018/05/16 04:41

自分も似たようなことで悩んだ経験があります。CSSが掲載されてないので勝手な予想なのですが、.slide-list の子要素にposition:absolute; の指定とかありませんか？

Bonito_Bonito

2018/05/16 04:43

おそらくposition関連とかのCSS絡みな気がするので、もし可能であれば該当の箇所だけでもCSSを載せていただけると回答しやすくなります。

kouki0611

2018/05/18 02:13 編集

simesava様お返事頂き、大変誠にありがとうございます。また遅れてしまったことお詫び申し上げます。 position: absolute;は使用しております。こちらが絡んでいるのでしょうか？ CSSの方追記させて頂きましたので、誠にお手数ですがご確認頂けますと非常に有難く思います。何卒宜しくお願い致します。