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!

Answer 1

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.

Answer 2

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

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

Answer 3

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...

Answer 4

To also add to Kelly's answer. If you have flickity in a modal and changing the opacity isn't an option (ie 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.

Answer 5

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

Answer 6

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.