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

Question

So I have built a slider using pretty much the same code as Andrei has done here .

That's all great... but do you notice the transition when you scroll around back to the first slide, it jumps?

Does anyone know how I can fix this? I have been trying different things but nothing seems to work.

I would like it to transition smoothly all the way around the slider loop with no jumps when loading the next image.

Any help would be greatly appreciated. Thanks.

 $('.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

Kindly add slick slider options:

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

So I just changed my css so that I was directly targeting .slick-center through .slick-slide and this seemed to do the trick!

No idea why this didn't work before as I had it set up in pretty much the same way but for some reason .slick-center has to be targeted through .slick-slide instead of independently for it to be picked up and work smoothly.

Thanks for the link to this ReSedano !

:)

Answer 3

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

Adding a useTransform: false option above, solve the flickering transition problem for me.

Answer 4

Just had the same issue.

Changed my animation to target the class.slick-center rather than.slick-current which resolved this issue.