Images won't load in Flickity unless I resize the browser

Question

I'm working on a project and for whatever reason my images within Flickity slides are loading only when the browser gets slightly resized. Here's my website: /

I have resize set to true in Flickity so I'm not sure what the issue is here. Any help would be greatly appreciated.

Thank you!

Edit: problem is solved!

Did you find a solution? I've reported the issue here: https://github.com/metafizzy/flickity/issues/1077 — Mark Boulder, Jun 21 '20 at 20:06

score 4 · Answer 1 · answered Oct 06 '20 at 06:53

In case anyone else runs into this and imagesLoaded doesnt make a difference for you, this was my solution:

If you happen to be loading this slider inside a modal that on button click, the modal changes from display:none to display: block -- this will also give you the error of needing to resize the screen to make the carousel work.

To fix this, use opacity: 0 instead of display:none on the hidden modal. When the button is clicked, change the modal to opacity:1.

score 3 · Accepted Answer · answered Jan 27 '18 at 00:39

3

Because you need to add imagesLoaded in your flickity options and include the images loaded flickity library.

https://flickity.metafizzy.co/options.html#imagesloaded

answered Jan 27 '18 at 00:39

kenny

438
4
14

This is incorrect (github.com/metafizzy/flickity/issues/1077). – Mark Boulder Jun 21 '20 at 20:14

score 1 · Answer 3 · answered Nov 20 '20 at 20:20

To also add to Kelly's answer. If you have flickity in a modal and changing the opacity isn't an option (i.e. in my case I use the same model for both garllery display and mobile navigation, toggling the display of each feature). You can also destroy the flickity variable and re-initialise. For example in my event handler I have:

if (/* condition for closing */) {
  event.preventDefault();
  lightbox.classList.remove('visible');
  flckty.destroy()
  lightboxCar.style.display = "none";
}

else if (/* condition for opening carousel */) {
  lightboxCar.style.display = "initial";
  var pageImgs = document.querySelector("main").getElementsByTagName("img");
  flckty = new Flickity( '#lightbox-carousel', {
    // options
    "cellAlign": 'center',
    });

where lightboxCar is the carousel item on the page.

you're the MVP. Thanks! – Leonardo Muzí Aug 23 '21 at 19:58 — Leonardo Muzí, Aug 23 '21 at 19:58

Jay Parmar · Answer 4 · 2021-04-03T07:43:04.283

1

Maybe opacity will not perfect for you, Use this way if you like :

.hide{
    transform: translateY(-1000em);
    position: absolute;
}

.show{
    transform: none;
    position: relative;
}

toggle this class using JQuery or JS...

edited Apr 03 '21 at 07:43

answered Apr 02 '21 at 20:48

Jay Parmar

11
2

score 1 · Answer 5 · answered Nov 08 '21 at 00:13

If you still need to load the gallery dynamically and opacity is not the best option for your project, try the resize method after loading, or in your open event handler like this:

$('.open--modal').on( 'click', function() {
    $carousel.flickity('resize');
});

read more https://flickity.metafizzy.co/api.html#resize

score 0 · Answer 6 · answered Aug 19 '22 at 23:44

I know that this thread is old but i found a better solution(i think): instead of use opacity use a class with display:none and after that you removed the class use setInterval(() => {swiper.resize()}, 1);. It works perfectly in my case.

Images won't load in Flickity unless I resize the browser

6 Answers6