Diaporama avec descriptif 3

On peut préférer un mouvement horizontal pour les images; pas grand chose à modifier dans le code précédent: clic sur chaque bouton pour déplacer les images et survol de chaque image pour afficher le descriptif correspondant.

On peut choisir de faire apparaître le descriptif par une translation haute ou basse; le nombre d'images et leur taille est à votre convenance.

L'apparence des boutons n'apparaît pas dans le code.

Le descriptif 1...
avec texte, images, vidéos et liens.

Le descriptif 2 ...

Le descriptif 3 ...

Le descriptif 4 ...

Le descriptif 5 ...

<div style="width: 800px; height: 450px; border: 4px ridge white; margin: 0px auto; overflow: hidden;">
<input id="a1" class="bt" type="text" value="1" /><input id="a2" class="bt" type="text" value="2" /><input id="a3" class="bt" type="text" value="3" /><input id="a4" class="bt" type="text" value="4" /><input id="a5" class="bt" type="text" value="5" />
<div id="cont" style="width: 4100px; height: 450px; transition: all 1s linear;"><img style="float: left; width: 800px; height: 450px;" src="http://ekladata.com/4iIQwdzHVpTGcD8nWWrFMAa0lu0.jpg" alt="" /> <img style="float: left; width: 800px; height: 450px;" src="http://ekladata.com/NDeeQpB-Sq01WPCsFUXe2SSQXHY.jpg" alt="" /> <img style="float: left; width: 800px; height: 450px;" src="http://ekladata.com/5Up2SgJeZ37BzQn78kb7_eut3hc.jpg" alt="" /> <img style="float: left; width: 800px; height: 450px;" src="http://ekladata.com/DfgQ0HLORccDj7NXvq6ItWJhwiw.jpg" alt="" /> <img style="float: left; width: 800px; height: 450px;" src="http://ekladata.com/ziR2dc5KUUNHwpdwQqb2eX7bIus.jpg" alt="" />
<p id="d1" style="clear: left; float: left;">Le descriptif 1...<br />avec texte, images, vidéos et liens.</p>
<p id="d2" style="float: left;">Le descriptif 2 ...</p>
<p id="d3" style="float: left;">Le descriptif 3 ...</p>
<p id="d4" style="float: left;">Le descriptif 4 ...</p>
<p id="d5" style="float: left;">Le descriptif 5 ...</p>
</div>
</div>

<style><!--
.bt{ position:absolute; z-index:10; width:30px; height:30px; border-radius:50%; text-align:center; font-size:16pt;}
#a1{transform:translate(750px,10px);}
#a2{transform:translate(750px,60px);}
#a3{transform:translate(750px,110px);}
#a4{transform:translate(750px,160px);}
#a5{transform:translate(750px,210px);}
#a1:focus ~ #cont{transform:translate(0px,0px);}
#a2:focus ~ #cont{transform:translate(-800px,0px);}
#a3:focus ~ #cont{transform:translate(-1600px,0px);}
#a4:focus ~ #cont{transform:translate(-2400px,0px);}
#a5:focus ~ #cont{transform:translate(-3200px,0px);}

#d1, #d2,#d3, #d4,#d5{width: 800px; height: 450px; transform:translate(0px,-450px); opacity:0; transition: all 1s linear; background: rgba(0,0,0,0.5); text-align: center; font-size: 14pt; color: white; text-shadow: 1px 1px black;}

#d1:hover,#d2:hover,#d3:hover,#d4:hover,#d5:hover{opacity:1;}
--></style>

En ajoutant des images, n'oubliez pas d'agrandir le contenant des images en fonction du nombre d'images et de leur largeur (et hauteur).

Les images sont placées en ligne et les descriptifs sont placés dessous et remontés pour être au dessus de chaque image en opacité=0 (transparent).

Lorsque les images se déplacent, les descriptifs suivent le même mouvement.

Au survol d'un descriptif invisible, il devient opaque.

Chaque clic sur un bouton fait se déplacer le contenant d'une largeur d'image.