Réalisation d’un slideshow automatique

Afin de donner un peu d’animation sur votre site, vous pouvez y placer un diaporama qui défilera automatiquement, sue cet article, voici un exemple simple à mettre en place le tout en CSS.

Dans un précédent article, nous avons vu comment mettre en place un diaporama commandé au clic de la souris. Pour une page d’accueil, il est plus sympathique pour l’internaute de voir défiler ces derniers articles.

Pour voir ce que cela donne, rendez vous sur cette page.

Code HTML

Nous allons commencer par mettre en place le code HTML, placer dans un fichier html le code suivant :

<div align="center">
  <div class="contener_slideshow">
    <div class="contener_slide">
      <div class="slid_1"><img src="1.png"></div>
      <div class="slid_2"><img src="2.png"></div>
      <div class="slid_3"><img src="3.png"></div>
    </div>
  </div>
</div>

Placer à placer vos images sur la racine de votre site.

CODE CSS

.contener_slideshow
{
  width:610px;
  height:211px;
  overflow: hidden;
  position: relative;
  background-image: url(YOUR-URL-IMAGE.png);
}
.slid_1, .slid_2, .slid_3
{
  position: absolute;
  width:610px;
  height:211px;
}
img
{
  height:211px;
}
.slid_1{left: 0;}
.slid_2{left: 610px;}
.slid_3{left: 1220px;}
.contener_slide
{
  width: 1220px;
  height: 211px;
  left:0px;
  position: absolute;
  -webkit-animation-duration: 10s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-name: anim_slide;
  -moz-animation-duration: 10s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-name: anim_slide;
  -ms-animation-duration: 10s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-name: anim_slide;
  animation-duration: 10s;
  animation-iteration-count:infinite;
  animation-name: anim_slide;
}
@-webkit-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@-moz-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@-ms-keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}
@keyframes anim_slide 
{
  0% {left:0px;}
  22% {left:0px;}
  33% {left:-610px;}
  45% {left:-610px;}
  66% {left:-1220px;}
  90% {left:-1220px;}
}

Voilà un petit diaporama automatique simple et rapide à mettre en place., pour l’exemple, suivez ce lien.

Le code source a été trouvé sur wifeo.

Laisser un commentaire