Comment mettre une légende sur un diaporama.

Un slideshow avec légende 

Le html 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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 

 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
#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.