Bonjour,

J'ai essayé de faire un slider en CSS3 sans que cela fonctionne, je retrouve avec mes deux bandeaux l'un au dessus de l'autre...

Merci de votre aide ?

le code HTML:

<div id="slidebanner">

<ul id="sContent">

<li><a href="https://www.monsite.com" target="_blank"><img src="https://www.monsite/bannierre-haute-1.jpg" alt="Nouveau site 1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>

<li><a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/bannierre-haute-2.jpg" alt="Mon site 2, découvrez ce site !" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>

</ul>

</div>

le CSS :

@keyframes AutoSlide {

from 0s to 0s, from 0s to 3s {

left: 0px; /*1ère image*/

}

from 3s to 3s, from3s to 6s {

left: -1100px; /*2ème image*/

}

}

#slidebanner {

position: relative;

width: 100%;

height: 100%;

margin: 0px;

overflow: hidden;

}

#sContent li {

display: inline;

}

#sContent {

position: absolute;

top: 0;

left: 0;

width: 1100px;

margin: 0;

padding: 0;

/*CSS3 keyframes animation*/

animation-name: AutoSlide;

-webkit-animation-name: AutoSlide;

-moz-animation-name: AutoSlide;

-o-animation-name: AutoSlide;

animation-duration: 6s;

-webkit-animation-duration: 6s;

-moz-animation-duration: 6s;

-o-animation-duration: 6s;

animation-iteration-count: infinite;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

-o-animation-iteration-count: infinite;

animation-timing-function: linear;

-webkit-animation-timing-function: linear;

-moz-animation-timing-function: linear;

-o-animation-timing-function: linear;

}

Merci d'avance !

Bonjour,

Le message qui suit est une réponse automatique activée par un membre de l'équipe. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention plus facilement.
Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
Pour plus d'informations, nous vous invitons à lire les règles générales du forum

Merci d'utiliser les balises de code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour celà, il faut utiliser le bouton . Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: c;">Votre code ici</pre>.

Merci de modifier votre message en conséquence via le bouton "Modifier" situé sur son coin supérieur droit, sans quoi le sujet sera fermé.