Tengo dos funciones, una carga las imágenes del móvil y la otra traduce automáticamente las imágenes después de un tiempo determinado. El problema es que la función de traducción ya no funciona después de mover toda la carga de imágenes a JavaScript en lugar de codificarla en HTML (debido a la administración de activos del paquete web y al proceso de compilación). Aquí está el sitio de referencia: https://ecstatic-snyder-29f00e.netlify.app/

Cargar imágenes móviles

 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); }); };

Empezar la presentación de diapositivas

 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)'; } }); };

Se están llamando a ambas funciones, pero la presentación de diapositivas no comienza hasta que se carga la página y luego se actualiza. ¿Alguien sabe qué puede estar causando este tipo de comportamiento? Leí que configurar CSS con JavaScript puede alterar la forma en que se cargan las cosas, pero no estoy seguro de cómo remediar esto cuando las imágenes deben configurarse con JavaScript o CSS. Actualmente usando una función setTimout para prolongar la transición.