Листать слайды в слайдере столько раз сколько кликнули

Необходимо реализовать такую вещь, что если кликать много раз на слайдер во время анимации слайды не должны переключаться до тех пор, пока анимация не закончится. Например: Если я кликаю 20 раз на контрол слайдера во время анимации - ничего не происходит. Когда анимация закончилась и я кликнул 21 раз - слайд переключился на следующий.

Вот код js моего слайдера, подскажите как можно реализовать?

const slideContainer = document.querySelector(".container");
const slide = document.querySelector(".slides");
const nextBtn = document.getElementById("next-btn");
const prevBtn = document.getElementById("prev-btn");
const interval = 3000;

let slides = document.querySelectorAll(".slide");
let index = 1;
let clicks = 0;
let slideId;
let currentDot;

const firstClone = slides[0].cloneNode(true);
const lastClone = slides[slides.length - 1].cloneNode(true);

firstClone.id = "first-clone";
lastClone.id = "last-clone";

slide.append(firstClone);
slide.prepend(lastClone);

const slideWidth = slides[index].clientWidth;

slide.style.transform = `translateX(${-slideWidth * index}px)`;

const startSlide = () => {
   slideId = setInterval(() => {
      moveToNextSlide();
      setActiveDot();
   }, interval);
};

const getSlides = () => document.querySelectorAll(".slide");

const flipSlide = () => {
   slide.style.transition = ".7s ease-out";
   slide.style.transform = `translateX(${-slideWidth * index}px)`;
}

const setActiveDot = () => {
   if (index !== slides.length - 1) {
      currentDot = document.getElementById(`dot-${index}`);
      currentDot.classList.add('active');
   } else {
      currentDot = document.getElementById(`dot-1`);
      currentDot.classList.add('active');
   }
}
const disableDot = () => {
   if (index === 2) {
      currentDot = document.getElementById(`dot-1`);
      currentDot.classList.remove('active');
   }
   if(index === slides.length - 1){
      currentDot = document.getElementById(`dot-${slides.length - 2}`);
      currentDot.classList.remove('active');
   }
   else {
      currentDot = document.getElementById(`dot-${index - 1}`);
      currentDot.classList.remove('active');
   }
}

slide.addEventListener("transitionend", () => {
   disableDot();
   slides = getSlides();
   if (slides[index].id === firstClone.id) {
      slide.style.transition = "none";
      index = 1;
      slide.style.transform = `translateX(${-slideWidth * index}px)`;
   }

   if (slides[index].id === lastClone.id) {
      slide.style.transition = "none";
      index = slides.length - 2;
      slide.style.transform = `translateX(${-slideWidth * index}px)`;
   }

});

const moveToNextSlide = () => {
   slides = getSlides();
   if (index >= slides.length - 1) return;
   index++;
   setActiveDot();
   disableDot();
   flipSlide();
};

const moveToPreviousSlide = () => {
   if (index <= 0) return;
   index--;
   flipSlide();
};

const checkOutsideClick = ({target}) => {
   if (target.id.includes('dot')) {
      index = [...document.getElementsByName("dot-selector")].findIndex((e) => e === target);
      flipSlide();
   }
}

document.body.addEventListener("click", checkOutsideClick)

nextBtn.addEventListener("click", () => {
   moveToNextSlide();
});
prevBtn.addEventListener("click", moveToPreviousSlide);

startSlide();

console.log(slides.length);