Poseemos la mejor respuesta que hemos encontrado por todo internet. Esperamos que te sirva de ayuda y si puedes aportar alguna mejora hazlo con libertad.
Solución:
$(document).ready(function()
$('.sc').slick(
dots: true,
speed: 150,
centerMode: true
);
);.sc img
height: calc(50vh - 100px);
width: auto;
margin: 0 auto; /* it centers any block level element */
El problema proviene del hecho de que cada diapositiva individual es un div que automáticamente abarca el ancho del carrusel, pero las imágenes no llenan los divs por completo y, de forma predeterminada, se alinean a la izquierda dentro de sus contenedores. Intenta agregar algo como esto a tus estilos:
.sc div text-align: center;
.sc img margin: auto;
Tuvo problemas similares, cuando todas las imágenes no tenían la misma altura, no se alinearon en el control deslizante: busque .slick-track en tu “slick.css” y cambia display a flex y añadir align-items: center.
Si tienes alguna indecisión y disposición de ascender nuestro enunciado eres capaz de ejecutar una aclaración y con gusto lo interpretaremos.