Tengo 3 conjuntos de imágenes. Yo quiero:

1. Mostrar conjunto 1 (será visible al cargar la página)
2. Ocultar conjunto 1 y mostrar conjunto 2
3. Ocultar conjunto 2 y mostrar conjunto 3
4. Regresa al inicio

Estoy usando Velocity.js, sin embargo, me cuesta pensar en la mejor manera de estructurar esto.

Esto me acerca un poco, pero casi necesito decirle a Velocity que espere hasta que termine un conjunto antes de comenzar con el siguiente:

 const products = [ "shoes", "tablet", "cushion", "phonecase", "sticker", "t-shirt", "cup", "jacket", ]; let set1 = []; products.forEach((product) => { set1.push(document.getElementById(`hero-${product}-1`)); }); let set2 = []; products.forEach((product) => { set2.push(document.getElementById(`hero-${product}-2`)); }); let set3 = []; products.forEach((product) => { set3.push(document.getElementById(`hero-${product}-3`)); }); set1.forEach((item, index) => { Velocity( item, { opacity: 0, }, { loop: true, delay: 30000 + 100 * index, } ); }); set2.forEach((item, index) => { Velocity( item, { opacity: 1, }, { loop: true, delay: 20000 + 100 * index, } ); }); set3.forEach((item, index) => { Velocity( item, { opacity: 1, }, { loop: true, delay: 10000 + 100 * index, } ); });