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!

Hallvard

I got this error on your site, seen on console. "NetworkError: 404 Not Found - smart.trippple.com.br/img/ajax-loader.gif?1462523748 " – Unmannered

I came across this error too, but it doesn't seem to be related. I fixed it on my local server and forgot to upload to the test env. I did it now, anyway. Thanks! – Hallvard

I had a similar issue and it turned out to be caused by the element above my carousel having a negative margin-bottom (hence overlapping the carousel) at a certain breakpoint. This seemed to interfere with the calculation when resizing the window. Once I removed the negative margin it worked perfectly. – Pledget

I am also experiencing the same problem - would be good to know if you found a solution. – Shatter

@Shatter I'm sorry for replying only now. The issue turned out to be the div that wrapped the whole site. If you have something similar (eg. a container), try removing it or checking its CSS rules. ;) – Hallvard

@GabrielBonifacio thanks for getting back to me! iirc for me the issue turned out to be a wrapper with display:flex - although it was a while ago now. – Shatter

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)

Delinquency

also looks like you need to make your containers responsive, for example at max width of 1199 change your containers width to be a percentage instead of px. – Delinquency

I actually tried, yeah. When I do that, Slick only changes the number of slides shown, but the width remains the same (and so the scrollbars). The container is responsive - I use Susy. If you access another page without carousels (say, smart.trippple.com.br/quem-somos), you'll see everything adapts perfectly. Thanks for your answer! – Hallvard

@Delinquency It is not working on browser resize. It is working only when I reload the browser after resizing it. – Hedgepeth

Answer 2

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

Works for me after resized or after show a hidden slider.

This method is not available in the official documentation.

Jayjaycee

For me $('#slick-slider').slick('resize'); followed by the above worked correctly – Temuco

Answer 3

Maybe if you force slick to resize on window resize this would fit :

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

Unmannered

Yeah, @technico, I tried that too and forgot to mention! It didn't work either. I'll update my question. Thanks for your answer! – Hallvard

This worked for me on a similar issue: I was destroying and re-creating a vertical slider but it didn't get the right height until I used $('.slide').slick('resize'), which I didn't find in the online docs. – Interlaminate

Answer 4

In my case I was actually missing image stretching

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

Radiogram

Answer 5

I recently had the same problem and this is how I solved it. On the resize or orientation change event of window, destroy the slick and create it again.

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

Anemometer

Answer 6

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

with $('#slick-slider').slick('setPosition');

Works for me

Gourley