Flickity Slider works only after window resize

EmilienRamos commented 6 years ago

I'm working with Flickity Slider, and I have an issue.

Only the last image is shown. But when I resize window (just 1px), it works and it display all images.

This is how I display flickity slider

jQuery('.plansItemImagesSlider').flickity({ autoPlay: 3000, imagesLoaded: true, pauseAutoPlayOnHover: true });

WHAT I'VE TRIED

Trying to simule a window resize :

if (jQuery('.plansItemImagesSlider').length > 0){ jQuery(window).resize(); }

Trying to use Flickity doc :

if (jQuery('.plansItemImagesSlider').length > 0){ jQuery(this).flickity('reloadCells'); } AND if (jQuery('.plansItemImagesSlider').length > 0){ jQuery(this).flickity('resize'); }

But I'm getting an error : flickity not initialized. Cannot call methods, i.e. $().flickity("reloadCells")

I also tried to put it together : jQuery('.plansItemImagesSlider').flickity({ autoPlay: 3000, imagesLoaded: true, pauseAutoPlayOnHover: true }, 'reposition' /* OR 'resize' */);

desandro commented 6 years ago

I'm sorry to see you're having trouble with Flickity. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.

EmilienRamos commented 5 years ago

Well, it's very weird. I'm using Flickity several times on my website.

For example, on HomePage, it's ok. But on others pages it doesn't work. It's like my configuration is not good but I don't know what is wrong ...

I notice that property "left" is never loaded on child elements. But when I resize the window, it appear in HTML DOM. I will search a solution before create a reduced test case.

Vendio-Websolutions commented 5 years ago

Did you solve this problem in the end? I've exactly the same problem in my website right now.

EmilienRamos commented 5 years ago

Hello ! Yeah, I solved it, but it’s very complicated .. I worked with Wordpress - Divi theme - Tabs module. So the issue is very specific.

I solved it by using builder on the web page, and not with the back office.

niklasp commented 5 years ago

i have the same issue and do not know how to fix

dreit-p commented 3 years ago

The bug still exists. I didn't see any reasons for it... One page works properly, another one doesn't.

rodrigues-tiago commented 1 year ago

window.onload = () => {
  flkty.reloadCells()
  flkty.resize()
}

this worked for me

metafizzy / flickity-docs

Flickity Slider works only after window resize #58