El carrusel elegante no cambiará de tamaño

Estoy usando el carrusel Slick.js en un sitio de WordPress que estoy desarrollando. Cuando cambio el tamaño de la ventana del navegador, los carruseles no encajan, lo que hace que aparezcan barras de desplazamiento horizontales. Si no inicio Slick, las imágenes cambian de tamaño en consecuencia, como cabría esperar en un diseño fluido.

Slick inyecta dinámicamente algunos estilos en línea, y uno de ellos es el ancho. Puede ver el ancho en todas las divisiones secundarias del carrusel:
Estilos en línea elegantes

El comportamiento normal de Slick es actualizar esos anchos a medida que cambia el tamaño de la ventana, pero por alguna razón no sucederá en este sitio.

Aquí está el enlace a la página web: http://smart.trippple.com.br/

La página de inicio tiene dos carruseles, ubicados en estas posiciones:

1. principal #slider-home .container .slider-session
2. principal #seguradoras .container #seguradoras-carrousel .slider-session

Así es como estoy iniciando el script:

  $('#slider-home .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 5000,
    arrows: false,
    fade: true,
    slidesToScroll: 1,
    slidesToShow: 1,
    speed: 1000
  });

  $('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4
  });

Y aquí está todo lo que probé hasta ahora:

• Desactivé todos los scripts excepto jQuery y Slick para asegurarme de que no haya ningún conflicto;
• Probé diferentes versiones de jQuery;
• Intenté incluir jQuery Migrate;
• Intenté cargar jQuery + Slick en el encabezado del sitio;
• Intenté sacar los carruseles del contenedor;
• Intenté establecer un ancho y un ancho máximo para el carrusel div en mi hoja de estilo;

• Intenté usar el método de cambio de tamaño de Slick:

  $(ventana).cambiar tamaño(función() { $(‘#slider-home .slider-session’).slick(‘cambiar tamaño’); });

• Investigando en todas partes e incluso abriendo un problema en la página de Github del complemento. El autor del complemento respondió que el script definitivamente cambia de tamaño y que el problema está en mi entorno, y tiene razón. Creé una página HTML estática para probar, y el carrusel respondía al 100 %. Hay algo en este sitio web que impide el comportamiento normal del script.

Por cierto, no verá las hojas de estilo de Slick vinculadas porque las incrusté en la hoja de estilo principal del sitio.

¡Cualquier ayuda es muy apreciada! Estoy tratando de resolver esto durante unas dos semanas, al menos, y no sé qué más probar. Cualquier idea es bienvenida. ¡Gracias!

¿Has probado la opción de respuesta de slicks? No sé si esta es la respuesta que está buscando, pero eso es lo que hago para que mi control deslizante funcione según el tamaño del navegador.

$('#seguradoras-carrousel .slider-session').slick({
    autoplay: true,
    autoplaySpeed: 2000,
    arrows: false,
    centerMode: true,
    mobileFirst: true,
    pauseOnHover: false,
    slidesToShow: 4,
    //start responsive option
    responsive: [
    {
      breakpoint: 600, //at 600px wide, only 2 slides will show
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480, //at 480px wide, only one slide will show
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    ]
});

Actualizado para trabajar en el cambio de tamaño en lugar de actualizar

necesita dos funciones, una función de cambio de tamaño y una función de pulido

jQuery(window).on('resize', function() {

  clearTimeout(resizeTimerInternal)

  resizeTimerInternal = setTimeout(function() {
    //add functions here to fire on resize
    slickSliderWithResize();
  }, 100)

});


function slickSliderWithResize() {
  if (jQuery(window).width() < 1150) {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {

    }
    else {
      jQuery('.slick-slider-wrapper').slick({
        // slick options
      });
    }
  } else {
    if(jQuery('.slick-slider-wrapper').hasClass('slick-initialized')) {
      jQuery('.slick-slider-wrapper').slick("unslick");
    }
  }
}
slickSliderWithResize();

esto debería funcionar en el cambio de tamaño, pero debe editarlo un poco para que se ajuste a su control deslizante. el nombre del contenedor del control deslizante (acabo de llamarlo slick-slider-wrapper), las opciones de slick y el tamaño para que se descomponga (lo tengo configurado en menos de 1150px)

$('#slick-slider').slick('setDimensions');

Funciona para mí después de cambiar el tamaño o después de mostrar un control deslizante oculto.

Este método no está disponible en la documentación oficial.

Tal vez si fuerza a Slick para cambiar el tamaño en el cambio de tamaño de la ventana, esto encajaría:

$(window).resize(function() {
  $('#slider-home .slider-session').slick('resize');
  $('#seguradoras-carrousel .slider-session').slick('resize');
});

En mi caso, en realidad me faltaba estirar la imagen.

.slick-slide img {width: 100%;}

Hace poco tuve el mismo problema y así lo resolví. En el evento de cambio de tamaño o cambio de orientación de la ventana, destruya la mancha y créela de nuevo.

var slickOptions = {
    arrows: false,
    dots: true,
    adaptiveHeight: true,
    mobileFirst: true
};

$('.slick-element').slick(slickOptions);

$(window).on('resize orientationchange', function() {
    $('.slick-element').slick('unslick');
    $('.slick-element').slick(slickOptions);
});

$(‘#slick-slider’).slick(‘setDimensions’);

con $(‘#slick-slider’).slick(‘setPosition’);

Funciona para mi