所以我使用与 Andrei在这里所做的几乎相同的代码构建了一个滑块。
这一切都很棒......但是当您滚动回到第一张幻灯片时，您是否注意到过渡，它会跳跃？
有谁知道我该如何解决这个问题？我一直在尝试不同的事情，但似乎没有任何效果。
我希望它在加载下一个图像时能够围绕滑块循环平滑过渡，而不会跳跃。
任何帮助将不胜感激。谢谢。
$('.slider').slick({
centerMode: true,
centerPadding: '30px',
slidesToShow: 3
});.slick-slide>div {
transform: scale(.5);
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.slick-center>div {
transform: scale(1);
}
.slider__item>img {
width: 100%;
height: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/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.min.js"></script>
<div class="slider">
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div …我想用nth-child选择最后4个元素.有办法做到这一点吗？
我无法为这些孩子添加独特的课程,所以我需要一种方法来确定哪些是最后4个孩子,以便我可以编辑这些而不影响其他孩子？
我正在使用Wordpress的高级自定义字段,所以我的代码如下所示:
<div class="all-skills-div">
<?php
if( have_rows('skills') ):
while( have_rows('skills') ):
the_row();
?>
<div class="single-skill-div">
<?php echo the_sub_field('a_skill'); ?>
</div>
<?php
endwhile;
endif;
?>
</div>
子字段输出大约9个不同的文本行(现在但由于它是动态的,这可能会改变)所以我想要定位最后4个.
任何帮助,将不胜感激.
谢谢