Légende diaporama: impossible à afficher

Bon, n'ayant pas de réponses, je continue les essais.
J'ai créé des CSS:
 

#slideShowImages { /* id du div contenant les images */
  background-color: #000000;
  display: block;
  position: relative;
  width: 600px; /* largeur du div */
  height:  400px; 
  margin: auto;  /* centrage de l'image */
}

.legdiapo { /* aspect de la légende des diapos */ 
  display: block;
  position: absolute;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #ffffff;
  text-align: center;
  bottom : 0px;  /* le texte est aligné sur la bas */
}

La classe legdiapo (légende diapo) fait que les légendes sont bien en bas mais toutes au même endroit () le texte est blanc car il devrait se trouver sur un fond noir mais ce n'est pas le cas ici.
Voici le code html de la page en question:
 

<div style="margin:auto; width:500px; text-align: center; padding: 5px; background: #000000; color: #ffffff;"> La faune sur les billets de banque (<strong>50</strong>) <br /> 
Cliquez pour suspendre, Cliquez pour relancer. </div>
<!-- le clic pour suspendre fonctionne parfaitement //-->
<br />
  <div style="margin:auto; width:600px; height:400px;"><!-- Correspond a la taille des images -->
  <div id="slideShowImages">
    <img src="slideshow/Faune/Antilopes_Nepal.jpg" alt="Antilopes" /><p class="legdiapo">Antilopes du Népal <em>(Pantholops hodgsoni)</em></p>
    <img src="slideshow/Faune/Atele_Venezuela.jpg" alt="Atele" /><p class="legdiapo">Atele (Singe araignée)</p>
    <img src="slideshow/Faune/Buffles-africain_Somalie.jpg" alt="Buffles africain" /><p class="legdiapo">Buffle d'Afrique <em>(Syncerus caffer)</em></p>

Si vous avez besoin de plus de détails je me tiens à votre disposition mais je continue mes multiples tests malgré les infos sur des sites spécialisés qui ne donnent rien dans mon cas...
Merci d'avance !

Bonjour,

Le code javascript qui fait fonctionner ton slideshow est le fichier /Styles/SlideShow.js

Dans ce script, les slides sont récupérés ligne 55 avec l'instruction globals.wrapperObject.querySelectorAll('img') où wrapperObject est l'élément html #slideShowImages initialisé ligne 51.

Ton code js fonctionne actuellement avec des éléments img en tant que slides, tu ne peux donc pas modifier la structure html de ton slideshow sans adapter ton code js.

Dans la fonction querySelectorAll() ligne 55, tu peux essayer d'utiliser le sélecteur css ':scope > *' à la place de 'img' pour récupérer en tant que slides tous les éléments qui sont des enfants directs de l'élément #slideShowImages (peu importe que la balise soit img ou figure).
Exemple : https://jsfiddle.net/7683sj5c/

Salut Pitet,
Merci beaucoup pour tes éclaircissements.
Je viens à peine de reprendre le suivi (j'ai eu des Pbs avec mon PC.
Je viens de copier les lignes de codes de ton exemple que je vais regarder de pré avec notepad ++.
Je te tiens au courant de l'évolution.
Cdlt !