如何让光滑的滑块在循环中平滑过渡

Question

所以我使用与 Andrei 所做的几乎相同的代码构建了一个滑块 here。

这一切都很棒...但是当您滚动回第一张幻灯片时，您是否注意到过渡，它跳动了？

有谁知道我该如何解决这个问题？我一直在尝试不同的事情，但似乎没有任何效果。

我希望它在加载下一张图片时在滑块循环中一直平稳过渡，没有跳跃。

如有任何帮助，我们将不胜感激。谢谢

$('.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 class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
</div>

Answer 1

请添加光滑的滑块选项：

speed:1300,
infinite: true,

$('.slider').slick({
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3,
  speed:1300,
  infinite: true,
});

.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 class="slider__item">
    <img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
</div>

Answer 2

所以我只是更改了我的 css，以便我通过 .slick-slide 直接定位 .slick-center，这似乎可以解决问题！

不知道为什么这在以前不起作用，因为我以几乎相同的方式设置它，但出于某种原因，.slick-center 必须通过 .slick-slide 来定位，而不是独立地定位它捡起来工作顺利

感谢 link 到 this ReSedano！

:)

如何让光滑的滑块在循环中平滑过渡

How to get slick slider to smooth transition in a loop

javascript

css

jquery

sass

slick.js