Как решить проблему со слайдами у Slick при использовать transform?

Question

Использую карусель Slick и возникает проблема со слайдами при использовании трансформации и переходе с первого слайда на последний, и с последнего на первый.

Прикладываю пример: https://codepen.io/gambala/pen/akxBXr

То есть, если нажать на предыдущий слайд с первого на последний, слайд на мгновение зависнет и применит стили. Есть ли какое-то решение этому?

  $(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1
  });

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 10px 20px;
}

.slick-slide img {
  width: 100%;
  transform: scale(0.9);
  transition:300ms;
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-dotted .slick-current img {
  transform: scale(1.1);
}

.slick-dots{display:none!important}

<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>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" />

<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">

<section class="center slider">
    <div><img src="http://placehold.it/350x300?text=1"></div>
    <div><img src="http://placehold.it/350x300?text=2"></div>
    <div><img src="http://placehold.it/350x300?text=3"></div>
    <div><img src="http://placehold.it/350x300?text=4"></div>
    <div><img src="http://placehold.it/350x300?text=5"></div>
    <div><img src="http://placehold.it/350x300?text=6"></div>
    <div><img src="http://placehold.it/350x300?text=7"></div>
    <div><img src="http://placehold.it/350x300?text=8"></div>
    <div><img src="http://placehold.it/350x300?text=9"></div>
</section>

БЛОГ НА HUSL

Как решить проблему со слайдами у Slick при использовать transform?

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