Slide carousel will not resize

Question

I use the Slick.js carousel on the Wordpress site that I am developing. When I resize the browser window, carousels will not fit, resulting in horizontal scrollbars. If I do not initiate Slick, the image size changes accordingly, as expected in the liquid layout.

Slick dynamically introduces some inline styles, and one of them is width. You can see the width across all child divisions of the carousel: Remove inline styles

The normal behavior of Slick is to update these widths when the window is resized, but for some reason this will not happen on this site.

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

On the main page there are two carousels located in these positions:

• master # slider-home.container .slider-session
• main # seguradoras.container # seguradoras-carrousel.slider-session

This is how I run 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 that’s all I’ve tried so far:

• Disable all scripts except jQuery and Slick to make sure there is no conflict;
• Tested different versions of jQuery;
• Tried to enable jQuery Migrate;
• Tried to load jQuery + Slick in the site header;
• Attempt to remove carousels from the container;
• I tried setting the width and maximum width in the carousel div on my stylesheet;

• Tried to use the Slick scaling method:

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

• Github. , script , , . HTML- , 100% . -, script.

, Slick, .

! , , , . . !

Answer 1

? , , , , , .

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

,

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

, , . ( slick-slider-wrapper), slick , ( 1150 )

Answer 2

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

Answer 3

, . .

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

Answer 4

Perhaps if you click slick to resize when the window is resized, this will correspond to:

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

Answer 5

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

It works for me after resizing or after showing a hidden slider.

This method is not available in official documentation.