28172 sujets

CSS et mise en forme, CSS3

Slideshow en CSS3

Bonjour,

J'ai suivi le tuto pour créer un Slideshow en CSS3, mais visiblement ça marche pas pour safari et chrome mais pas de souci pour firefox et opera
http://www.alsacreations.com/tuto/lire/1059-ID-slideshow-css3-animation-keyframes-automatique.html

<!DOCTYPE html>
<html>
<head>
<style> 
#slideshow {
    background-color:white;
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0px 15px 0px 0px; 
    border-style: none;
    overflow: hidden;
}
#sContent li {
    display: inline;
}
#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 1220px;
    margin: 0;            
    padding: 0;
    
    /*CSS3 keyframes animation*/
    animation-name: AutoSlide;
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
@keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -305px; /*2ème image*/
    }
    40% {
        left: -305px; /*2ème image*/
    }
    50% {
        left: -610px; /*idem pour attente*/
    }
    65% {
        left: -610px; /*3ème image*/
    }
    75% {
        left: -915px; /*3ème image*/
    }
    90% {
        left: -915px; /*idem pour attente*/
    }
    100% {
        left: 0px; /*1ère image*/
    }
}
</style>
</head>
<body>

<div id="slideshow" style=" float:left;border-width: 3px; border-style: solid;">
<ul id="sContent"><li>
			<img width=300px alt="Image" src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/bleu.png"></li>
<li>
			<img  width=300px alt="Image" src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/vert.png"></li>
<li>
			<img  width=300px  alt="Image" src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/brun.png"></li>
<li>
			<img  width=300px alt="Image" src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/bleu.png"></li>
</ul></div>

</body>
</html>

si quelqu'un à une explication
Merci
Bonjour,

l'explication est simple: tu n'as pas lu - et donc appliqué - le tutoriel entièrement : le bloc bleu au milieu de la page ( juste après le bloc des keyframes ) précise clairement qu'il faut penser à ajouter les préfixes pour chaque navigateur.

C'est valable pour les keyframes et les appels à l'animation.

Bonne continuation !
merci pour ton aide,
J'avais essayer en préfixant certains éléments mais c'était incomplet donc ne marchait pas.
J'ai repris le CSS de l'exemple
http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/slide-automatique.css
et ajouté ce qu'il manquait et tout fonctionne parfaitement.

je remet le code si ça peut aider quelqu'un par la suite
<!DOCTYPE html>
<html>
<head>
<style> 
#slideshow {
    background-color:white;
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0px 15px 0px 0px; 
    border-style: none;
    overflow: hidden;
}
#sContent li {
    display: inline;
}
#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 1220px;
    margin: 0;            
    padding: 0;
    

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

}
@-webkit-keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -305px; /*2ème image*/
    }
    40% {
        left: -305px; /*2ème image*/
    }
    50% {
        left: -610px; /*idem pour attente*/
    }
    65% {
        left: -610px; /*3ème image*/
    }
    75% {
        left: -915px; /*3ème image*/
    }
    90% {
        left: -915px; /*idem pour attente*/
    }
    100% {
        left: 0px; /*1ère image*/
    }
}
@-moz-keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -305px; /*2ème image*/
    }
    40% {
        left: -305px; /*2ème image*/
    }
    50% {
        left: -610px; /*idem pour attente*/
    }
    65% {
        left: -610px; /*3ème image*/
    }
    75% {
        left: -915px; /*3ème image*/
    }
    90% {
        left: -915px; /*idem pour attente*/
    }
    100% {
        left: 0px; /*1ère image*/
    }
}
@keyframes AutoSlide {
    0% {
        left: 0px; /*1ère image*/
    }
    15% {
        left: 0px; /*idem pour attente*/
    }
    25% {
        left: -305px; /*2ème image*/
    }
    40% {
        left: -305px; /*2ème image*/
    }
    50% {
        left: -610px; /*idem pour attente*/
    }
    65% {
        left: -610px; /*3ème image*/
    }
    75% {
        left: -915px; /*3ème image*/
    }
    90% {
        left: -915px; /*idem pour attente*/
    }
    100% {
        left: 0px; /*1ère image*/
    }
}
</style>
</head>
<body>

<div id="slideshow" style=" float:left;border-width: 3px; border-style: solid;">
<ul id="sContent"><li>
			<img width=300px alt="Image" src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/bleu.png"></li>
<li>
			<img  width=300px alt="Image" src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/vert.png"></li>
<li>
			<img  width=300px  alt="Image" src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/brun.png"></li>
<li>
			<img  width=300px alt="Image" src="http://www.alsacreations.com/xmedia/tuto/exemples/slideshow_css3/images/bleu.png"></li>
</ul></div>

</body>
</html>
bonjour à tous, merci pour le tuto. Je dois faire un travail similaire juste que le background de la page doit changer en cliquant et glissant la souris comme pour deplacer un element, quelqu'un peut m'aider ? merci
Modifié par lazhar (25 Jan 2013 - 10:25)
Sujet clos
Aller à