Hola @alberto_pro,
El problema que describes es muy común al personalizar el slick carousel en PrestaShop 1.7.6.4, que efectivamente utiliza ese componente. El position: absolute y top: 50% necesitan un transform para un centrado vertical perfecto. Además, los puntos necesitan un diseño más explícito para verse bien.
Aquí te propongo un conjunto de reglas CSS para tu themes/classic/assets/css/custom.css que deberían resolverlo y darles un estilo más moderno:
.slick-prev, .slick-next {
background-color: #007bff; /* Color de fondo */
border-radius: 50%;
height: 35px;
width: 35px;
z-index: 10;
transform: translateY(-50%);
top: 50%;
}
.slick-dots li button {
Con esto:
- Las flechas (
.slick-prev, .slick-next) tendrán un fondo, serán circulares, tendrán un tamaño definido y un z-index para asegurar que estén por encima de otros elementos. El transform: translateY(-50%) junto con top: 50% las centra verticalmente de forma precisa.
- Los puntos (
.slick-dots li button) también serán circulares, con un tamaño y color base. La regla li.slick-active button se encarga de cambiar el color del punto actualmente activo, dándole un mejor feedback visual.
Recuerda limpiar la caché de tu navegador y, si usas la caché de PrestaShop (en Parámetros Avanzados > Rendimiento), recompilar los archivos CSS si tienes la opción activada.