Ajout de texte sur un diaporama
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:
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:
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:
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 !
