Slider only works when I resize the window

Hi, since coming back from the Christmas holidays the sliders on my clients website has broke. But they randomly start working again as soon as I resize the window slightly.

I have tested this on all browsers and happens on Chrome, Firefox and Safari but for some reason, works perfectly fine on Edge...

here is my code -

const carouselImages = document.querySelector('.carousel__images');
const carouselButtons = document.querySelectorAll('.carousel__button');
const carouselCaptions = document.querySelectorAll('.carousel__caption');
const numberOfImages = document.querySelectorAll('.carousel__images img').length;
let imageIndex = 1;
let translateX = 0;

carouselButtons.forEach(button => {
  button.addEventListener('click', (event) => {
    if (event.target.id === 'previous') {
      if (imageIndex !== 1) {
        imageIndex--;
        translateX += 500;
      }
    } else {
      if (imageIndex !== numberOfImages) {
        imageIndex++;
        translateX -= 500;
      }
    }

    carouselImages.style.transform = `translateX(${translateX}px)`;
  });
});

metafizzy / flickity-docs

Slider only works when I resize the window #76