如何获得光滑的 slider 以在循环中平滑过渡

Question

因此，我使用与 Andrei 在这里所做的几乎相同的代码构建了 slider。

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

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

我希望它在加载下一个图像时在 slider 循环中平稳过渡，没有跳跃。

任何帮助将不胜感激。 谢谢。

 $('.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 而不是独立定位，才能被拾取并顺利工作.

感谢您提供此ReSedano的链接！

:)

Answer 3

$('.slider').slick({
  centerMode: true,
  centerPadding: '30px',
  slidesToShow: 3,
  useTransform: false,
});

在上面添加一个useTransform: false选项，为我解决闪烁的过渡问题。

Answer 4

只是有同样的问题。

将我的 animation 更改为针对 class.slick-center 而不是.slick-current 解决了这个问题。