Slick Slider с ошибкой скачков изображения

Question

После того, как анимация слайда (от масштаба (1,3) до масштаба (1)) заканчивается и возвращается к слайду, я получаю этот раздражающий прыжок.

Я хочу, чтобы каждый активный слайд уже был в масштабе (1,3) без скачка.

  $('.home-slider').slick({
     slidesToScroll: 1,
        slidesToShow: 1,
        //arrows: true,
        autoplay: true,
        autoplaySpeed: 7000,
        dots: false
  })

body,
html {
  height: 100%;
  background: #333;
  font-family: 'Roboto', sans-serif;
}

.slideshow {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  margin: 50px auto;
}

.slideshow .item {
  height: 100%;
  position: relative;
  z-index: 1;
}
.slideshow .item img {
  width: 100%;
  
}
.slideshow .item.slick-active img {
  -webkit-animation: ken-burns-out 8s 1 ease-in-out forwards;
  animation: ken-burns-out 8s 1 ease-in-out forwards;
}


/*//The animation: from 1.3 scale to 1*/
@-webkit-keyframes ken-burns-out {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes ken-burns-out {
    0% {
        -webkit-transform: scale(1.3);
        transform: scale(1.3)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>





<div class="slideshow">
  <div class="home-slider">
    <div class="item">
      <img src="https://images.unsplash.com/photo-1532386236358-a33d8a9434e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=978&q=80" />
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1518791841217-8f162f1e1131?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" />
    </div>
  </div>
</div>

Answer 1

Проблема возникает из-за того, что все изображения получают одинаковый z-индекс.

Мой код не работает при переходе от первого слайда к последнему слайду (слайд вправо), но это то, с чего нужно начинать.

прежде всего удалите z-index из этого селектора: .slideshow .item.

Затем добавьте преобразование к каждому изображению, чтобы каждое изображение начиналось с этого масштаба (возможно, добавьте имя класса для каждого изображения и затем измените селектор):

img {
  transform: scale(1.3);
}

Добавить функцию для получения скользящего индекса (есть клонированные элементы сликов, поэтому я использую селектор, который получает неклонированные слики):

function getSlickByIndex(index) {
  return $('.item:not(.slick-cloned)[data-slick-index="' + index + '"]');
}

Затем добавьте событие init (логика делает первый слайд, чтобы получить больший zIndex = 1 от всех его братьев и сестер, имеющих zIndex = 0), и beforeChange (логика делает следующее пятно, чтобы получить больший индекс и остальные, чтобы получить меньший индекс):

$('.home-slider').on('init', function(event, slick){
  getSlickByIndex(0).css('zIndex', '1');
}).on('beforeChange', function(event, slick, currentSlide, nextSlide){
  getSlickByIndex(currentSlide).css('zIndex', '0');
  getSlickByIndex(nextSlide).css('zIndex', '1');
});

Это рабочая скрипка: https://codepen.io/alonsh/pen/JQmZjj