javascript - How to get slick slider to smooth transition in a loop - Stack Overflow

admin管理员组

文章数量:1279241

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=".1.1/jquery.min.js"></script>
<link href=".9.0/slick.min.css" rel="stylesheet" />
<script src=".9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src=".jpg" alt="">
  </div>
  <div class="slider__item">
    <img src=".jpg" alt="">
  </div>
  <div class="slider__item">
    <img src=".jpg" alt="">
  </div>
  <div class="slider__item">
    <img src=".jpg" alt="">
  </div>
  <div class="slider__item">
    <img src=".jpg" alt="">
  </div>
  <div class="slider__item">
    <img src=".jpg" alt="">
  </div>
</div>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
</div>

• javascript
• jquery
• css
• sass
• slick.js

Share Improve this question Follow asked Jan 28, 2019 at 10:07 Emma DalbyEmma Dalby 18311 gold badge33 silver badges1515 bronze badges 3

• 1 Here you can find an interesting ticket about that bug: github./kenwheeler/slick/pull/3307 Maybe it can be helpful also for you. – ReSedano Commented Jan 29, 2019 at 11:38
• Fantastic, this solved my issue! Don't know why I never thought of checking the tickets haha. Thank you very much :) – Emma Dalby Commented Jan 29, 2019 at 12:05
• Yeeee! You're wele! :-) – ReSedano Commented Jan 29, 2019 at 12:19

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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!

:)

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<div class="slider">
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
  <div class="slider__item">
    <img src="https://pp.userapi./c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
  </div>
</div>

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

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

Just had the same issue.

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

本文标签： javascriptHow to get slick slider to smooth transition in a loopStack Overflow