Slideshow CSS3
Résolu
fredodo13127
Messages postés
14
Date d'inscription
Statut
Membre
Dernière intervention
-
fredodo13127 Messages postés 14 Date d'inscription Statut Membre Dernière intervention -
fredodo13127 Messages postés 14 Date d'inscription Statut Membre Dernière intervention -
A voir également:
- Slideshow CSS3
- Thundersoft free slideshow maker - Télécharger - Visionnage & Diaporama
- Movavi slideshow maker gratuit - Télécharger - Visionnage & Diaporama
- Free bolide slideshow creator - Télécharger - Visionnage & Diaporama
- Proshow slideshow - Télécharger - Visionnage & Diaporama
- Dvd slideshow - Télécharger - Présentation
2 réponses
La largeur du div #sContent doit faire 3 fois la largeur d'un slide (pour 3 slides) afin que ceux-ci puissent être positionnés les uns à coté des autres.
Important : il faut supprimer les espaces et/ou saut de ligne entre les slides pour éviter d'avoir un espace (comportement par défaut pour les éléments inline).
Pour le décalage à gauche via les @keyFrame, ceux-ci doivent être égale à la largeur d'un slide, soit 940px pour la 2ème image et 1880 pour la 3ème.
Bonne journée
Important : il faut supprimer les espaces et/ou saut de ligne entre les slides pour éviter d'avoir un espace (comportement par défaut pour les éléments inline).
Pour le décalage à gauche via les @keyFrame, ceux-ci doivent être égale à la largeur d'un slide, soit 940px pour la 2ème image et 1880 pour la 3ème.
<!-- HTML --> <div id="centre">CENTRE <div id="image-index"> <div id="slideshow"> <ul id="sContent"> <li><img src="http://placehold.it/940x627" alt="Image bleue" /></li><li><img src="http://placehold.it/940x627" alt="Image verte" /></li><li><img src="http://placehold.it/940x627" alt="Image brune" /></li> </ul> </div> </div> </div>
/* CSS */ #image-index { width: 940px; height: 627px; background: #64ACD1; margin-right: auto; margin-left: auto; border: 1px solid #CCC; } @keyframes AutoSlide { 0%, 15%, 100% { left: 0px; /*1ère image*/ } 35%, 50% { left: -940px; /*2ème image*/ } 70%, 85% { left: -1880px; /*3ème image*/ } } #slideshow { position: relative; width: 940px; height: 627px; overflow: hidden; } #sContent li { display: inline; /* supprimer les espaces et saut de ligne */ } #sContent { position: absolute; top: 0; left: 0; width: 2820px; /* 3 x 940px */ margin: 0; padding: 0; /*CSS3 keyframes animation*/ animation-name: AutoSlide; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
Bonne journée
Les 3 images font 940x627