title: Setting Image Transition after Loading w/ JavaScript
body: <p>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: <a href="https://ecstatic-snyder-29f00e.netlify.app/" rel="nofollow noreferrer">https://ecstatic-snyder-29f00e.netlify.app/</a></p>
  <p><strong>Load Mobile Images</strong></p>
  <pre><code>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&lt;imgTags.length; i++) {
        imgTags[i].src = mobileArr[i];
     };
  
     return new Promise(function(resolve, reject) {
        setTimeout(backgroundSlideShow, 100);
  });
  };
  </code></pre>
  <p><strong>Start Slide Show</strong></p>
  <pre><code>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 &gt;= 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', () =&gt; {
        if (carouselImgs[counter].id === 'firstClone') {
          container.style.transition = 'none';
          counter = carouselImgs.length - counter;
          container.style.transform = 'translateX(' + (-size * counter) + 'px)';
        }
     });
     };
  </code></pre>
  <p>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.</p>