Slick: Slick initializes with width:0 on all relevant elements

[FredericoAndrade]

Hi there,

in adding to the $(document).ready( function() { $('.slickPhotos').slick() }), the script runs properly, creates all the DOM elements etc, but does not determine the correct widths until I first drag on the image.

Only when I drag on the image does the carousel seem to fully execute.

There are no console errors thrown so I'm at a loss. Thanks for the help!

[kenwheeler]

Is your carousel hidden at first? Are you executing prior to document being ready? An easy way to reinit slick dimensions is to manually trigger a window resize event.

[Splintex]

It still working bad even with trigger a window resize event. Could you check this bug?

[simeydotme]

by the HTML screenshot it looks like you have Slick in a modal/lightbox, if this is true then as @kenwheeler said: your carousel is hidden... and javascript cannot calculate dimensions of a hidden object :)

The way to rectify this is to reset the dimensions _after_ the modal/lightbox is displayed. :)

[goodpixels]

this looks like something i am experiencing: https://github.com/kenwheeler/slick/issues/1325

[em-elle]

I experienced the same problem and fixed it according to @kenwheeler's suggestion, triggering a resize function:

  $(document).ready(function() {

            $('.slideshow').slick({
                fade: true,
            });

            $('.project-body').hide();

            $('.project-link').click(function(e){
                 e.preventDefault();
                 var $this = $(this).parent().find('.project-body');
                 $(".project-body").not($this).hide();
                 $(".project").not($(this).parent()).removeClass("project-border");  
                 $($this).toggle();
                 $(this).parent().toggleClass("project-border");

                 $(window).trigger('resize');

                 $("body, html").animate({ 
                     scrollTop: $( $(this).attr('href') ).offset().top 
                });
            });
   }); 

So that when you click on ".project-link", the corresponding ".project-body" expands and other projects close, and ideally the slick dimensions could be reset. This only works for the first project I click on, however... for some reason it doesn't work every time a project link is clicked after that. Here's the HTML:

       <div class = "project>
                 <a href = "#" class = "project-link">Project Link</a>
       </div>

       <div class = "project-body">
                 <div class = "project-gallery">
                          <div class = "project-text">Project Text</div>
                          <div class = "slideshow">
                                    <div><img class="project-image" src="IMAGE.JPG" alt="Home"></div>
                          </div>
                 </div>
        </div>

Any idea why all subsequent project links aren't resetting the dimensions so that the first slideshow image shows? Thank you!

[jimfu]

I've found out that the AD-block makes it hidden in the beginning because I named the class as 'ad-banner'

[MisterBalboa]

@em-elle is correct ! Having a hidden node makes width crash. The problem is solved as @kenwheeler's suggestion, just to clarify, you should trigger the resize function where ever you have the function that renders the slide. Most commonly on a click event

button.onclick = function() {
  // Other actions..
  $(window).trigger('resize');
}

[vinayakjo]

Here is what I did to resolve the issue. I was loading slick slider with thumbnail navigation in jquery's colorbox and was hidden by default.

Code for slick slider:

$('.slider-for').slick({
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      fade: true,
      asNavFor: '.slider-nav'
    });
    $('.slider-nav').slick({
      slidesToShow: 3,
      slidesToScroll: 1,
      asNavFor: '.slider-for',
      dots: true,
      centerMode: true,
      focusOnSelect: true
    }); 

Code for refreshing the slider after colorbox was opened:

$(".quickview-link").colorbox({
inline:true, 
width:"700px",
top:"100px",
onComplete:function(){
$(".slider-for").slick("refresh");
$(".slider-nav").slick("refresh");
} 
}); 

Hope this helps as I spent a while searching for the solution and this one works for me.

[booster085]

I am using slick with kendo and the problem was that slick is called at the same time after the dom is rendered, in pure html there's no problem, but with kendo for example you need a little timeout to let slick calculate right dimensions. So adding timeout makes things work fine.
var st = setTimeout(function () { $('.carousel').slick({ dots: true }) }, 100);

[RBrNx]

I also struggled with this issue, but it was not related (at least directly) to an element with display: none set. In my project I was also using less.js for processing my .less files in the browser, this was taking around 100-150ms to complete and slick was working fine.

The width: 0px appeared when I added an @import to one of my .less files causing the processing to go up to around 200-230ms, this was enough of a delay that the HTML elements were not styled when slick was initialized. To fix it I simply added a delay to the initialization of slick:

    setTimeout(function () {
        $(".container-body").slick({
            arrows: false,
            swipe: false,
            infinite: false
        });
    }, 500);

[Defite]

@RBrNx setTimeout 0 will work as well :)

[Aerials92]

First of all:
@kenwheeler thanks a lot for this awesome slider. :) its damn sexy!

To help you guys fixing this "hidden slider Problem" i found a solution at least for my project:
@vinayakjo helped me a lot for that! Thank you buddy :)

My slick slider is defined in a hidden tab too, so the width of the sliding elements cant be calculated.
I fixed the problem by using this simple line of code:
$('.your_hidden_slider_class_or_id').slick("refresh");
Paste this into the function which sets the hidden element to display:block.
Cheers.

[IbnAhmed]

@Aerials92 thanks bro. It's work for me too.

$('.your_hidden_slider_class_or_id').slick("refresh");

[seriiserii825]

@Aerials92 It's work for me too.

[pqminh]

@Aerials92 It's work for me too. Tks!

[WebmasterManish]

I found this issue when my slick was inside accordion.Other tricks was not working.Here is the short trick if your slider is inside accordion.

Wrap your slider code inside accordion tab click. for example

$('#accordion-tab').click(function(){

Your slick slider functions goes here

})

[naveenlb-epsilon]

This worked for me too, thanks @Aerials92

[tanero]

This issue and solution still valid, thank you for recommendations.

[bearpress]

Only thing that worked for me:

$(".element")[0].slick.setPosition();