Discussion :

[Spatah]

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 !

[Invit�]

Bonjour,

le principe est le m�me.

Le code, l�g�rement am�lior� * :

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="slider" class="slider">
  <figure>
    <img src="" alt="" />
    <figcaption></figcaption>
  </figure>
 
  <div class="button">
    <button class="prevBtn sliderbtn"></button><!-- précédent-->
    <button class="pauseBtn sliderbtn"></button><!-- play/pause-->
    <button class="nextBtn sliderbtn"></button><!-- suivaht-->
  </div>
</div>

Code JS :

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
"use strict";
// Crée la class Slider
class Slider {
  constructor(sliderId, imgs, txts) {
    this.idSlide = sliderId;
    this.imgs = imgs;
    this.txts = txts;
 
    this.slide = document.getElementById(this.idSlide);
    this.img = this.slide.querySelector('img');
    this.txt = this.slide.querySelector('figcaption');
 
    this.prev = this.slide.querySelector('div .prevBtn');
    this.pause = this.slide.querySelector('div .pauseBtn');
    this.next = this.slide.querySelector('div .nextBtn');
 
    this.prev.innerHTML = '<i class="fas fa-chevron-left"></i>'
    this.pause.innerHTML = '<i class="fas fa-pause"></i>'
    this.next.innerHTML = '<i class="fas fa-chevron-right"></i>'
 
    // initialisation image + texte
    this.imgNumber = 0;
    this.img.src = this.imgs[this.imgNumber];
    this.txt.textContent = this.txts[this.imgNumber];
 
    // 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.sliderTimer = null;
    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];
    this.txt.textContent = this.txts[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];
    this.txt.textContent = this.txts[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>'
 
    }
  }
}
// --------------
var slide = new Slider(
  'slider',
  ["https://www.f-legrand.fr/scidoc/figures/image/niveaux/images/babouin.png",
   "https://www.nymphomath.ch/info/images/lena.gif",
   "https://i.pinimg.com/originals/b2/d4/6f/b2d46fbb7ed4de9a73f55f5b8cbfc084.png"],
  ["babouin",
   "lena",
   "tigrou"]
);

* En fait, on peut encore am�liorer, en g�n�rant le contenu HTML du div <div id="slider" class="slider"> via JS (createElement()).

[Spatah]

Merci beaucoup de ton aide, c'est parfait !