javascript - 为什么光滑的滑块在循环的第二次迭代中刷新滑块项的 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>

标签： javascriptjquerycsssliderslick.js

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>