Slideshow CSS3 [Résolu/Fermé]

Signaler
Messages postés
15
Date d'inscription
samedi 30 mai 2015
Statut
Membre
Dernière intervention
23 avril 2017
 -
Messages postés
15
Date d'inscription
samedi 30 mai 2015
Statut
Membre
Dernière intervention
23 avril 2017
 -
Bonjour,

J'ai un petit bug sur ce tuto : https://www.alsacreations.com/tuto/lire/1059-ID-slideshow-css3-animation-keyframes-automatique.html

Ma première image s'affiche bien mais la 2eme et 3eme non ! 


#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: -1254px; /*2ème image*/
    }
    70%, 85% {
        left: -1881px; /*3ème image*/
    }
}

#slideshow {
    position: relative;
    width: 940px;
    height: 627px;
    overflow: hidden;
}
#sContent li {
    display: inline;
}
#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 627px;
    margin: 0;            
    padding: 0;
    
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


et le php 

<div id="centre">CENTRE 
                <div id="image-index"><div id="slideshow">
    <ul id="sContent">
        <li><img src="img/lac-1.JPG" alt="Image bleue" /></li>
        <li><img src="img/lac-2.JPG" alt="Image verte" /></li>
        <li><img src="img/lac-3.JPG" alt="Image brune" /></li>
    </ul>
</div></div>


Merci pour votre aide !!!!

Bonne journée

2 réponses

Réponse 1 / 2
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
 441
Salut,

Quelle est largeur de tes images en pixels ?
Signaler
Messages postés
15
Date d'inscription
samedi 30 mai 2015
Statut
Membre
Dernière intervention
23 avril 2017
Merci pour ton temps Pitet !

Les 3 images font 940x627
Réponse 2 / 2
Messages postés
2371
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
13 janvier 2021
 441
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. 

<!-- 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
Signaler
Messages postés
15
Date d'inscription
samedi 30 mai 2015
Statut
Membre
Dernière intervention
23 avril 2017
Je te remercie beaucoup, effectivement ça marche désormais.

Bonne journée à toi
Posez votre question