I have two functions, one loads the mobile images in and the other automatically translates the images after a set time. The problem is that the translate function is no longer working after moving all image loading to JavaScript instead of hard-coding it in the HTML (due to webpack asset management and the build process). Here is the site for reference: https://ecstatic-snyder-29f00e.netlify.app/

Load Mobile Images

function loadMobileImages() {
   const mobileArr = [img1, img2, img3, img4];
   const imgTags = document.querySelectorAll('.mobileBackground');
   const lastClone = document.querySelector('#lastClone');
   const firstClone = document.querySelector('#firstClone');
   lastClone.src = img4;
   firstClone.src = img1;

   for (let i=0; i<imgTags.length; i++) {
      imgTags[i].src = mobileArr[i];
   };

   return new Promise(function(resolve, reject) {
      setTimeout(backgroundSlideShow, 100);
});
};

Start Slide Show

function backgroundSlideShow() {
   const container = document.querySelector('#carousel-container');
   const carouselImgs = document.querySelectorAll('.background');
   const slideTime = 10000;
   let counter = 1;
   const size = carouselImgs[0].clientWidth;
   container.style.transform = 'translateX(' + (-size * counter) + 'px)';

   setInterval(function() {
      if (counter >= carouselImgs.length - 1) {
         return
      };
      container.style.transition = 'transform 0.4s ease-in-out';
      counter++;
      container.style.transform = 'translateX(' + (-size * counter) + 'px)';
    }, slideTime);

   container.addEventListener('transitionend', () => {
      if (carouselImgs[counter].id === 'firstClone') {
        container.style.transition = 'none';
        counter = carouselImgs.length - counter;
        container.style.transform = 'translateX(' + (-size * counter) + 'px)';
      }
   });
   };

Both functions are being called, but the slideshow doesn't start until loading the page and then refreshing. Does anyone know what may be causing this type of behavior? I read that setting CSS w/ JavaScript can mess with how things load, but am not sure how to remedy this when images need to be set with JavaScript or CSS. Currently using a setTimout function to prolong the transition.