Hi I need to move the current active slide to the right a bit with padding-left
. Doing so makes the slider jump a bit on each next slide.
How to fix this behavior?
https://jsfiddle.net/ezy50jd2/2/
HTML:
<div class="slick-center">
<div>
<img src="https://via.placeholder.com/260x150">
</div>
<div>
<img src="https://via.placeholder.com/260x150">
</div>
<div>
<img src="https://via.placeholder.com/260x150">
</div>
</div>
CSS:
.slick-slide{
width: 300px;
}
.slick-center .slick-current{
padding-left: 90px;/*this makes slides jump*/
}
Setup:
$(function () {
$('.slick-center').slick({
infinite: true,
autoplay: true,
centerMode: true,
centerPadding: '180px',
slidesToShow: 1,
slidesToScroll: 1,
speed: 400,
dots: false,
prevArrow: false,
nextArrow: false,
variableWidth: true
});
});
You could try using the transform attribute. You might even add transition effect for smoother animation.
transform: translateX(90px);
transition: 1s ease-in-out;
A fork of your fiddle with the implementation https://jsfiddle.net/nh4qucdp/25/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.