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

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 ?
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
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
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