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);を各要素に指定してみたりしましたが、特に変化はありませんでした。

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

宜しくお願い致します。