Slider CSS

Bonjour,

J'ai essayé d'adapter un tuto de chez, mais je me retrouve, sans que cela fonctionne, 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 !
Modifié par IEDfactory (20 Mar 2018 - 14:04)