CODEWITHSUNDEEP
jquerywordpressslick.js
Gabriel Bonifacio
Gabriel Bonifacio

Reputation: 71

Slick carousel won't resize

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:

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!

Upvotes: 7

Views: 35996

Answers (6)

Letícia Gomes
Letícia Gomes

Reputation: 11

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

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

Works for me

Upvotes: 1

VALLEE David
VALLEE David

Reputation: 31

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

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

This method is not available in the official documentation.

Upvotes: 3

laviku
laviku

Reputation: 541

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

Upvotes: 2

cup_of
cup_of

Reputation: 6687

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)

Upvotes: 3

mdob
mdob

Reputation: 2314

In my case I was actually missing image stretching 

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

Upvotes: 2

technico
technico

Reputation: 1172

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

Upvotes: 2

Related Questions