Hola, necesito mover la diapositiva activa actual un poco hacia la derecha con padding-left . Hacerlo hace que el control deslizante salte un poco en cada diapositiva siguiente.
¿Cómo arreglar este comportamiento?
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*/ }Configuración:
$(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 }); });Podría intentar usar el atributo de transformación. Incluso puede agregar un efecto de transición para una animación más suave.
transform: translateX(90px); transition: 1s ease-in-out;Una bifurcación de su violín con la implementación https://jsfiddle.net/nh4qucdp/25/