Bonjour à tous,

Je suis débutante en javascript. Grâce à un tuto j'ai créé un diaporama à défilement auto + défilement grâce aux flèches du clavier.
Jusqu'ici tout va bien...

J'aimerais maintenant ajouter du texte sur mes diapos (une légende en bas de la photo).
C'est quelque chose que je sais faire via HTML mais sur ce code, j'ai choisi de créer un objet pour le diaporama et d'ajouter les images via un tableau.
Malgré mes recherches, je n'ai pas trouvé comment faire.

Quelqu'un pourrait m'aider ?

Voici le code :

HTML :
Code html : 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
    <div id="slider" class="slider">
      <img src="img/Image_1.jpeg" alt="Photo_Vélo_Ville">
 
      <!--Bouton précédent-->
      <div class="button">
        <button class="prevBtn sliderbtn">
          <i class="fas fa-chevron-left"></i>
        </button>
 
        <!--Bouton play/pause-->
        <button class="pauseBtn sliderbtn">
          <i class="fas fa-pause"></i>
        </button>
 
        <!--Bouton suivaht-->
        <button class="nextBtn sliderbtn">
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>

L'objet diapo en JS :
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// Crée la class Slider
class Slider {
  constructor(sliderId, imgs) {
    this.idSlide = sliderId;
    this.imgs = imgs;
 
    this.slide = document.getElementById(this.idSlide);
    this.img = this.slide.querySelector('img');
    this.prev = this.slide.querySelector('div .prevBtn');
    this.next = this.slide.querySelector('div .nextBtn');
    this.pause = this.slide.querySelector('div .pauseBtn');
 
    this.sliderTimer = null;
 
    this.imgNumber = 0;
 
    // Ecoute les événements (play/pause et flèches du slider + actions via les touches du clavier)
    document.addEventListener('keydown', (event) => this.keyboard(event));
    this.prev.addEventListener('click', () => this.prevImage());
    this.next.addEventListener('click', () => this.nextImage());
    this.pause.addEventListener('click', () => this.playPause());
 
    this.playPause();
  }
 
  // Affiche l'image précédente
  prevImage() {
    this.prev.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    this.imgNumber--;
    if (this.imgNumber < 0) {
      this.imgNumber = this.imgs.length - 1;
    }
    this.img.src = this.imgs[this.imgNumber];
  }
 
  // Affiche l'image suivante
  nextImage() {
    this.next.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    this.imgNumber++;
    if (this.imgNumber > (this.imgs.length - 1)) {
      this.imgNumber = 0;
    }
    this.img.src = this.imgs[this.imgNumber];
  }
 
  // Actions liées aux touches du clavier
  keyboard(e) {
    switch (e.keyCode) {
      case 37: // flèche gauche, image suivante
        this.nextImage();
        break;
      case 39: // flèche droite, image précédente
        this.prevImage();
        break;
      case 80: // touche P, play/pause
        this.playPause();
        break;
    }
  }
 
  // Timer du slider (5 sec) + bouton play/pause et changement d'icône
  playPause() {
    this.pause.blur(); // supprime le carré bleu qui reste autour des boutons du slider au clic
    if (this.sliderTimer) {
      clearInterval(this.sliderTimer);
      this.sliderTimer = null;
      this.pause.className = "playBtn sliderbtn";
      this.pause.innerHTML = '<i class="fas fa-play"></i>'
 
    } else {
      this.sliderTimer = setInterval(this.nextImage.bind(this), 5000);
      this.pause.innerHTML = '<i class="fas fa-pause"></i>'
 
    }
  }
}
Et pour finir, le main JS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
var slide = new Slider(
    'slider',
    ["./img/Image_1.jpeg",
        "./img/Image_2.jpg",
        "./img/Image_3.jpg"]
);
Merci par avance !