metafizzy / flickity

:leaves: Touch, responsive, flickable carousels
https://flickity.metafizzy.co
7.52k stars 605 forks source link

cells collapse on first load #789

Closed Ricky55 closed 6 years ago

Ricky55 commented 6 years ago

Hi

I think this maybe down to my code rather than a bug persay but I'm using two sliders with the asNavFor option and unless I set a specific height for my cells the sliders collapse on first load. This happens in Firefox on Windows and Safari iOS.

The page https://qwerty-website.co.uk/

If I set a height in my CSS and then set back to auto in my js the problem is solved. What am I doing wrong here? All your examples seem to set an explicit height but this stops them from scaling responsively.

Sorry if this is just down to my inexperience but if you can help me I'd very much appreciate it.

Thanks Richard

desandro commented 6 years ago

You may need imagesLoaded

Ricky55 commented 6 years ago

Desandro, thank you mate! I've been messing around trying to fix this for a few days, I should have checked the docs more thoroughly. I had a feeling a project as great as this wouldn't have something like this as a bug.

mrafei commented 4 years ago

Hi

@desandro I'm having problem with cells collapsing when my custom fonts is being loaded on my website, which results in changing width of cells.

Do you have any suggestions? Thanks.

clarknelson commented 4 years ago

wrap the Flickity instantiation in a jQuery window load event listener

$(window).on('load', function(){
  // create flickity somewhere in here
  // new Flickity()
  // $().flickity()
});
desandro commented 4 years ago

You may need to trigger resize after fonts have loaded.