Почему скользящий слайдер обновляет CSS элемента слайдера во второй итерации цикла

Question

Я использую скользящий слайдер в качестве изображения.

Я добавил верхнюю позицию css к одному из дочерних элементов, как показано ниже. Верхняя позиция css отлично работает при первой загрузке, и когда начинается вторая итерация цикла, верхняя позиция css удаляется и снова добавляется через секунду, что создает эффект прыжка. Проблема воссоздана и показана в скрипте, приведенной ниже. Есть ли способ исправить эту проблему со слайдом?

Проблема воссоздана в этом

$(function(){
$('.my-pics').slick({
	        infinite: true,
	        arrows: true,
	        dots: false,
	        autoplay: false,
	        slidesToShow: 5,
	        slidesToScroll: 5,
	    });
});

.my-pics {
  padding: 18% 4%;
}
.my-pics .slick-list {
  overflow: visible;
}
.my-pics .slick-list .slick-slide {
  position: relative;
  transform: rotate(45deg);
  overflow: hidden;
}
.my-pics .slick-list .slick-slide a {
  display: block;
  transform: rotate(-45deg);
}
.my-pics .slick-list .slick-slide a img {
  display: block;
  transform: scale(1.5);
}
.my-pics .slick-list .slick-slide:nth-child(7) {
  top: -90px;
}

img {
  max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

<div class="slider-wrapper">
<ul class="my-pics">
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
</ul>
</div>

Answer 1

$(function(){
$('.my-pics').slick({
	        infinite: true,
	        arrows: true,
	        dots: false,
	        autoplay: false,
	        slidesToShow: 5,
	        slidesToScroll: 5,
	    });
});

.my-pics {
  padding: 18% 4%;
}
.my-pics .slick-list {
  overflow: visible;
}
.my-pics .slick-list .slick-slide {
  position: relative;
  transform: rotate(45deg);
  overflow: hidden;
}
.my-pics .slick-list .slick-slide a {
  display: block;
  transform: rotate(-45deg);
}
.my-pics .slick-list .slick-slide a img {
  display: block;
  transform: scale(1.5);
}
//I deleted this line in your code and it works fine
/*.my-pics .slick-list .slick-slide:nth-child(7) {
  top: -90px;
}*/

img {
  max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

<div class="slider-wrapper">
<ul class="my-pics">
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
  <li>
    <a href="#">
      <img src="https://scontent-lhr3-1.cdninstagram.com/vp/307c4d415928020c567f6011288be180/5B7CBC15/t51.2885-15/s640x640/sh0.08/e35/30087758_2087929068157950_662421103938895872_n.jpg">
    </a>
  </li>
</ul>
</div>