Bonjour à tous,
voici mon soucis , je fais un petit carrousel et je teste plusieurs façons, , puis je fais une

  • ici j'ai fait une liste d'image dans une balise que je retrouve grâce à un querySelectorAll
  • au début du programme les images sont mises en 'display : none' sauf la première de ma liste
  • j'active un setInterval pour 'toggle' la classe 'display : none' de l'image qui est visible et en même temps je 'toggle' l'image suivante pour la faire apparaître
  • mon problème ici c'est que pour l'image suivante on me dit qu'elle n'est pas déclarée


voici à quoi ressemble mon code :
html
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
<div id="slider" class="display_none">
        <img src="images/1.jpg" alt="" title="bonjour">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
        <img src="images/5.jpg" alt="">
        <img src="images/6.jpg" alt="">
    </div>

Javascript
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
const TAB_IMG = document.querySelectorAll('#slider img')
const TAB_IMG_LENGTH = TAB_IMG.length
const ACTIVE_SLIDER = document.querySelector('#slider')
 
function set_display_none(){
    for( let i = 1 ; i < TAB_IMG_LENGTH ; i++){
        TAB_IMG[i].classList.toggle('display_none')
    }
    ACTIVE_SLIDER.classList.toggle('display_none')
    console.log('image chargés')
}
 
function play(){
 
    for(let i = 0 ; i < TAB_IMG_LENGTH -1 ; ++i){
        if(!TAB_IMG[i].classList.contains('display_none')){
 
            if(i == TAB_IMG_LENGTH-1){
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[0].classList.toggle('display_none')
            }else{
                TAB_IMG[i].classList.toggle('display_none')
                TAB_IMG[i+1].classList.toggle('display_none')
            }
        }    
 
    }
}
 
timerID = window.setInterval(play, 1000);
 
document.addEventListener('DOMContentLoaded', function(){
    set_display_none()
})
Voilà et c'est les TAB_IMG[i+1] qu'il n'accepte pas, alors que TAB_IMG est bien un tableau qui contient les positions des 6 images donc qui va de 0 à 5 si je ne me trompe pas.