Usando Elementor, tengo un widget de diapositiva con 2 diapositivas, cada diapositiva tiene texto que se escribe usando un efecto de máquina de escribir. El problema es que cuando se carga el widget de diapositivas, ejecuta el efecto de escritura en todas las diapositivas, por lo que cuando se desplaza a la segunda diapositiva, el texto ya se ha escrito, por lo que solo necesito ejecutar este efecto cuando la diapositiva está activa. ¿Hay alguna manera de ejecutar solo el código JS a continuación cuando la diapositiva está activa?

Esta es la clase de diapositiva cuando no está activa :
elementor-repeater-item-279a19f swiper-slide swiper-slide-next

Esto es cuando está activo :
elementor-repeater-item-279a19f swiper-slide swiper-slide-active

Este es el JS :

 let textLength = 0; let text = 'What follows is Lorem ipsum translated to English: But I must explain to you how all this mistaken idea of reprobating pleasure and extolling pain arose.'; function type() { let textChar = text.charAt(textLength++); let paragraph = document.getElementById("typed"); let charElement = document.createTextNode(textChar); paragraph.appendChild(charElement); if(textLength < text.length+1) { setTimeout('type()', 50); } else { text = ''; } } document.addEventListener("DOMContentLoaded", function() { type(); });