Slick carousel won't resize

Question

I'm using Slick.js carousel on a Wordpress site I'm developing. When I resize the browser window, the carousels won't fit it, causing horizontal scrollbars to show up. If I don't initiate Slick, the images resize accordingly, as you would expect in a fluid layout.

Slick injects some inline styles dynamically, and one of them is the width. You can see the width accross all child divs of the carousel: Slick inline styles

Slick's normal behavior is to update those widths as you resize the window, but for some reason it won't happen on this site.

Here is the link to the website: http://smart.trippple.com.br/

The home page has two carousels, located at these positions:

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

This is how I'm initiating the 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
  });

And here is everything I tried so far:

• Deactivated all scripts except for jQuery and Slick to make sure there isn't a conflict taking place;
• Tested different versions of jQuery;
• Tried including jQuery Migrate;
• Tried to load jQuery + Slick in the site's header;
• Tried to remove the carousels from the container;
• Tried to set a width and max-width to the carousel div on my stylesheet;

• Tried to use Slick's resize method:

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

• Researching everywhere and even opening an issue on the plugin's Github page. The plugin author replied that the script definitely resizes and the problem is in my environment, and he is right. I created a static HTML page to test, and the carousel was 100% responsive. There is something on this website which is preventing the script's normal behavior.

By the way, you won't see Slick's stylesheets linked because I embedded them into the site's main stylesheet.

Any help is really appreciated! I'm trying to solve this for about two weeks, at least, and I don't know what else to try. Any ideas are welcome. Thank you!

Answer 1

have you tried slicks responsive option? i dont know if this is the answer you are looking for but that is what i do to make my slider work based on browser resize.

$('#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
      }
    }
    ]
});

Updated to work on resize instead of refresh

you need two functions, a resize function and a slick function

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();

this should work on resize, but you need to edit it a bit to fit your slider. the name of the slider container (i just named it slick-slider-wrapper), the slick options, and which size to have it break down (i have it set at less than 1150px)