New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Slick initializes with width:0 on all relevant elements #235
Comments
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. |
It still working bad even with trigger a window resize event. Could you check this bug? |
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. :) |
this looks like something i am experiencing: #1325 |
I experienced the same problem and fixed it according to @kenwheeler's suggestion, triggering a resize function:
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:
Any idea why all subsequent project links aren't resetting the dimensions so that the first slideshow image shows? Thank you! |
I've found out that the AD-block makes it hidden in the beginning because I named the class as 'ad-banner' |
@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
|
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. |
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. |
I also struggled with this issue, but it was not related (at least directly) to an element with The width: 0px appeared when I added an setTimeout(function () {
$(".container-body").slick({
arrows: false,
swipe: false,
infinite: false
});
}, 500); |
@RBrNx setTimeout 0 will work as well :) |
First of all: To help you guys fixing this "hidden slider Problem" i found a solution at least for my project: My slick slider is defined in a hidden tab too, so the width of the sliding elements cant be calculated. |
@Aerials92 thanks bro. It's work for me too.
|
@Aerials92 It's work for me too. |
@Aerials92 It's work for me too. Tks! |
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 }) |
This worked for me too, thanks @Aerials92 |
This issue and solution still valid, thank you for recommendations. |
Only thing that worked for me:
|
Instead of targeting whole
|
This totally worked for me. Thanks!!! |
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!
The text was updated successfully, but these errors were encountered: