Почему появляется резкий переход от последнего слайда к первому в Slick Slider?

Question

Столкнулся с проблемой, делаю простой слайдер при помощи Slick Slider и наблюдаю резкий скачек от последнего слайда к первому если ставить режим infinite: true.

$('#slick-slider').slick({
  infinite: true,
  slidesToShow: 3,
  slidesToScroll: 1,
  swipe: true,
  arrows: true,
  // swipeToSlide: true,
  focusOnSelect: true,
  centerMode: false
});

body {
  background-color: black;
}

#slick-slider {
  padding: 0 50px;
}

.slick-prev {
  left: 15px!important;
}

.slick-next {
  right: 15px!important;
}

.slide {
  padding: 0 10px;
}

.inner-block {
  height: 100px;
  background-color: red;
  transform: translate(0px, 50px);
  transition: all 500ms ease;
}

.slide:hover .inner-block,
.slide.slick-current .inner-block {
  transform: translate(0px, 0px);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div id="slick-slider">
  <div class="slide">
    <div class="inner-block"></div>
  </div>
  <div class="slide">
    <div class="inner-block"></div>
  </div>
  <div class="slide">
    <div class="inner-block"></div>
  </div>
  <div class="slide">
    <div class="inner-block"></div>
  </div>
  <div class="slide">
    <div class="inner-block"></div>
  </div>
</div>

Если на сами слайды нажимать то все ок, если стрелками переходить то видно как на последнем слайде происходит рывок анимации. Скорее всего это происходит из за того что удаляются slick-clone слайды и приисваивается slick-current активному слайду (уже не клону), но как это избежать?

Answer 1

Решил путем добавления следующих стилей:

/* slide when not active/center*/ .slick-slide[aria-hidden="true"]:not(.slick-cloned) ~ .slick-cloned[aria-hidden="true"] { 
  transform: translate(0px, 50px);
}

/* slide when active/center */ 
.slick-slide[aria-hidden="true"]:not([tabindex="-1"]) + .slick-cloned[aria-hidden="true"] { 
  transform: translate(0px, 0px);
}

Но это не работает если кликать на 3 слайд и тогда переход происходит резкий на последнем слайде

БЛОГ НА HUSL

Почему появляется резкий переход от последнего слайда к первому в Slick Slider?

Ответы (1 шт):