【发布时间】：2018-04-27 13:16:22
【问题描述】：
我使用光滑的滑块作为图像轮播。
如下所示，我向其中一个子项添加了一个顶部位置 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>【问题讨论】：
-
我认为如果你正在做一个无限循环，一旦项目到达末尾，它就会被附加到开头，因此将不再是第 7 个孩子。您最好在该幻灯片上放一个课程并设置样式
-
如何为该特定项目添加类？
-
放上去吗？
标签： javascript jquery css slider slick.js