Slideshow

Voici deux diaporamas sans javascript ni jquery mais uniquement en CSS.

Un diaporama avec fondu

Le html

<div class="css-carousel">
    <img class="css-img" src="path/to/image/1" />
    <img class="css-img" src="path/to/image/2" />
    <img class="css-img" src="path/to/image/3" />
    <img class="css-img" src="path/to/image/4" />
    <img class="css-img" src="path/to/image/5" />
    <img class="css-img" src="path/to/image/6" />
</div>

Le Css (pour 6 images)

.css-carousel {
    width: 100%;
    height: 350px; /* Hauteur des images */
    position: relative;
    overflow: hidden;
}
.css-carousel .css-img {
    max-width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-animation: css-carousel-fade 30s linear infinite;
    -moz-animation: css-carousel-fade 30s linear infinite;
    -ms-animation: css-carousel-fade 30s linear infinite;
    animation: css-carousel-fade 30s linear infinite;
}
.css-carousel .css-img:nth-child(2) {
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -ms-animation-delay: 5s;
    animation-delay: 5s;
}
.css-carousel .css-img:nth-child(3) {
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -ms-animation-delay: 10s;
    animation-delay: 10s;
}
.css-carousel .css-img:nth-child(4) {
    -webkit-animation-delay: 15s;
    -moz-animation-delay: 15s;
    -ms-animation-delay: 15s;
    animation-delay: 15s;
}
.css-carousel .css-img:nth-child(5) {
    -webkit-animation-delay: 20s;
    -moz-animation-delay: 20s;
    -ms-animation-delay: 20s;
    animation-delay: 20s;
}
.css-carousel .css-img:nth-child(6) {
    -webkit-animation-delay: 25s;
    -moz-animation-delay: 25s;
    -ms-animation-delay: 25s;
    animation-delay: 25s;
}
@-webkit-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@-moz-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@-ms-keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}
@keyframes css-carousel-fade {
    0%, 20%, 100% { opacity: 0; }
    5%, 15% { opacity: 1;}
}

Un cycle complet du carrousel dure 30 secondes, l’animation est divisée en 5 secondes (6 * 5 = 30).

Diaporama avec 3 images

Il faudra adapter le fichier Css :

css-carousel-fade : 15s  
animation-delay: 5s puis 10s  
0%, 40%, 100% { opacity: 0; }
10%, 30% { opacity: 1;}

Paco de Lucía, John McLaughlin et Al Di Meola

Pour 8 images, il faut :

  • changer css-carousel-fade 40s linéaire infini;
  • ajoutez deux .css-carousel .css-img:nth-child(7 et 8) avec animation-delay: 30s et 35s;

Diaporama avec 8 images

Enki Bilal

Un slideshow avec légende

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.

comments powered by Disqus