Comment mettre une légende sur un diaporama.
Un diaporama
Le html
<section id="slideshow">
<div class="container">
<div class="c_slider"></div>
<div class="slider">
<a href="#"><figure>
<img src="url_image1" />
<figcaption>légende 1</figcaption>
</figure></a><!--
--><a href="#"><figure>
<img src="url_image2" />
<figcaption>légende 2</figcaption>
</figure></a><!--
--><a href="#"><figure>
<img src="url_image3" />
<figcaption>légende 3</figcaption>
</figure></a><!--
--><a href="#"><figure>
<img src="url_image4" />
<figcaption>légende 4</figcaption>
</figure></a>
</div>
</div>
</div>
</section>
Le Css pour 4 images
#slideshow {
position: relative;
margin: 0 auto 0;
}
#slideshow .container {
position:relative;
height: 600px;
overflow: hidden;
}
#slideshow .slider {
position: absolute;
left:0; top:0;
width: 3200px;
height: 600px;
-webkit-animation: slider 24s infinite;
-moz-animation: slider 24s infinite;
animation: slider 24s infinite;
}
#slideshow figure {
position:relative;
display:inline-block;
padding:0; margin:0;
}
#slideshow figcaption {
position:absolute;
left:0; right:0; bottom: 5px;
padding: 20px;
margin:0;
border-top: 1px solid rgb(225,225,225);
text-align:left;
letter-spacing: 0.05em;
word-spacing: 0.05em;
font-family: Georgia, Times, serif;
background: #fff;
background: rgba(255,255,255,0.7);
color: #555;
-webkit-animation: figcaptionner 24s infinite;
-moz-animation: figcaptionner 24s infinite;
animation: figcaptionner 24s infinite;
}
@-webkit-keyframes slider, {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -800px }
50%, 70% { left: -1600px }
75%, 95% { left: -2400px }
}
@-moz-keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -800px }
50%, 70% { left: -1600px }
75%, 95% { left: -2400px }
}
@keyframes slider {
0%, 20%, 100% { left: 0 }
25%, 45% { left: -800px }
50%, 70% { left: -1600px }
75%, 95% { left: -2400px }
}
Explications
J’ai choisi 4 images qui seront affichées chacune 6 secondes, la durée du cycle est donc 24 secondes.
La largeur des photos est de 800px, le slider fera donc 3200 px (4x800) de largeur et 600px de hauteur.
À 25% (100%:4) la première image sera déplacée à gauche de 800px. La deuxième 1600px à 50% etc.