18041 sujets

Questions générales et questions de débutants

Difficulter dans l'application de slideshow

Bonjour, les amis
j'essai d'appliquer slideshow (css) à mes images (3) comme l'exemple sur la page d'acceuil, aidez moi SVP: voici le code :
<style type="text/css">
@keyframe monslide{
0%{
left: 0px;
}
15% {
left: 0px;
}

35% {
left: -100px; }
50% {
left: -100px;
}

70% {
left: -200px;
}
85% {
left: -200px;
}

100% {
left: 0px;
}
}
#slideshow {
position: relative;
width: 200px;
height: 250px;
margin: 20px auto;
overflow: hidden;

}

#contenu {
position: absolute;
top: 0;
left: 0;
width: 450px;
margin: 0;
padding: 0;
/*animation */
animation-name: monslide;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;

}
#contenu li {
display: inline;

}
</style>
Merci !
Bonjour fadey,
peux-tu dire si, d'emblée tu obtiens un bon résultat de ton slideshow sur les navigateurs IE v.10 et FireFox ou Chrome ?
Bonjour,

Je n'ai pas réussi non plus à faire défiler les photos, du coup, j'ai concaténé les 3 en une seule grande photo qui défile. je ne sais pas si c'est bien sérieux comme procédé.
voici les codes :

-webkit-keyframes AutoSlide {
0%, 15%, 100% {
left: 0px; /* première image et dernière*/
}
50%, 70% {
left: -150px; /*2ème image*/
}
50%, 70% {
left: -1000px; /*3ème image*/
}
85%, 100% {
left: -2000px; /*4ème image*/
}
}
@-moz-keyframes AutoSlide {
0%, 15%, 100% {
left: 0px; /* première image et dernière*/
}
50%, 70% {
left: -150px; /*2ème image*/
}
50%, 70% {
left: -1000px; /*3ème image*/
}
85%, 100% {
left: -2000px; /*4ème image*/
}
}
@keyframes AutoSlide {
0%, 15%, 100% {
left: 0px; /* première image et dernière*/
}
50%, 70% {
left: -150px; /*2ème image*/
}
50%, 70% {
left: -1000px; /*3ème image*/
}
85%, 100% {
left: -2000px; /*4ème image*/
}
}

#slideshow {
position: relative; /*le parent positionné*/
width: 1000px; /*limite en largeur (1 élément du slideshow)*/
height: 216px; /*limite en hauteur*/
margin: 0px auto;
overflow: hidden; /*on cache ce qui déborde*/
}
#sContent li {
display: inline; /*on aligne les éléments du slideshow*/
}
#sContent {
position: absolute; /*on sort l'élément du flux*/
top: 0; /*on le positionne précisément dans ...*/
left: 0; /*l'angle haut gauche de son parent positionné*/
width: 216px;
margin: 0;
padding: 0;

/*CSS3 webkit keyframes animation*/
-webkit-animation-name: AutoSlide;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;

/*CSS3 moz keyframes animation*/
-moz-animation-name: AutoSlide;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: ease-in-out;

/*CSS3 W3C keyframes animation*/
animation-name: AutoSlide;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

et

<div id="slideshow">
<ul id="sContent">
<li><img src="defil2.jpg" alt="Image bleue"></li>
</ul>

(l'image fait 216px de haut et 3000px de large...)
Sujet clos
Aller à