27
rated 0 times
[
34]
[
7]
/ answers: 1 / hits: 19778
/ 5 Years ago, mon, january 28, 2019, 12:00:00
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>
More From » jquery
