Intanto, grazie per la risposta.
Allora, quello che cerco di realizzare è uno slider, usando JS e CSS3.
Tralascio la parte CSS perché non è quella che pone problemi (nel caso servisse, posso scrivere un
codepen).
In pratica, vorrei che le varie img contenute nei DIV di classe
slideshow__inner si sussegguissero cambiando il loro stato.
Nel primo esempio, dove ci sono solo 2 immagini, manca la definizione iniziale delle 2 variabili di lavoro (legate ai CSS), e c'è un errore. Riporto il codice corretto:
let timeOut, timeOut2;
// ! funzioni secondo metodo
let innerFront = document.querySelectorAll('#due .slideshow__inner--front');
let innerBack = document.querySelectorAll('#due .slideshow__inner--back');
window.onload = function () {
timeOut = setTimeout(function () {
change();
}, 8000);
}
function change() {
innerFront[0].querySelectorAll('figure')[0].classList.add('isActive');
timeOut2 = setTimeout(function () {
innerBack[0].querySelectorAll('figure')[0].classList.add('isActive');
}, 1000);
});
Mi scuso, ma la fretta...
In ogni modo, accade che dopo 8 secondi (primo
setTimeout), nel DIV della variabile
innerBack viene aggiunta la classe
isActive, che fa partire l'animazione
innerBack.isActive impostata nei CSS.
All'interno, è posto un secondo
setTimeout che dopo 1 secondo aggiunge nel nel DIV della variabile
innerFront un'altra classe
isActive, che fa partire l'animazione
innerFront.isActive impostata nei CSS.
Con questa impostazione, tutto funziona bene, nel senso che la sequenza delle azioni è corretta.
Il problema sorge quando io voglio rendere il ciclo infinito, cioè ripetitivo, e magari far scorrere altre img.
Quindi, al posto del primo
setTimeout, pongo un
setInterval, e poi gestisco lo spostamento delle denominazioni dei DIV in sequenza, cioè sposto le classi
slideshow__inner--front e
slideshow__inner--back, e tolgo le classi
isActive, per poi continuare a metterle in sequenza.
Accade che, con il mio codice, la prima classe
isActive viene correttamente impostata nella <figure> della classe
slideshow__inner--front, mentre l'altra per la classe
slideshow__inner--back, contenuta nella
function 'change', no.
Non so se ciò chiarisce, spero di sì.
Diciamo che sono un po' impantanato, ed è vero che il codice dovrebbe essere più pulito e leggibile, però temo che il problema sia concettuale.
Ripeto, se occorre uno snippet
codepen o altro, lo predispongo.