如何獲得光滑的 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 解決了這個問題。