Slick initializes with width:0 on all relevant elements

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.

screen shot 2014-05-14 at 11 57 39 pm

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

screen shot 2014-05-15 at 1 35 24 am

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

Issue Analytics

State:
Created 9 years ago
Comments:20 (1 by maintainers)

Top GitHub Comments

62reactions

vinayakjocommented, Feb 14, 2017

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.

46reactions

Aerials92commented, Jun 5, 2018

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.