Slideshow

Bonjour,

je suis sur le point de finir mon site.

Je l'ai mis en test sur ce lien : www.di-credico.com/test/

La dernière chose qu'il me reste à faire c'est de faire quatre slideshows automatiques pour les quatre images de droite.

Mais voilà le problème, le slideshow ne fonctionne pas, et l'image se décale sur la gauche (alors que le css fait qu'elle devrait être alignée à droite, comme ci-contre : )

Voici mon html :

<div id="slideshow1">
    <ul id="sContent"><!--
        --><li><img src="images/diap/1shan.png" alt="Début" /></li><!--
        --><li><img src="images/diap/2shan.png" alt="Milieu" /></li><!--
        --><li><img src="images/diap/3shan.png" alt="Fin" /></li>
    </ul>
</div>

et voici mon css :

@keyframes AutoSlide {
    0% {
        left: 0px;
    }
    15% {
        left: 0px; 
    }
    35% {
        left: -196px; 
    }
    50% {
        left: -196px; 
    }
    70% {
        left: -392px; 
    }
    85% {
        left: -392px; 
    }
    100% {
        left: 0px;
    }
}

#slideshow1 {
    position: relative;
	height : 150px;
	width : 196px;
	margin-top : -110px;
	margin-bottom : 10px;
    overflow: hidden;
}
#sContent li {
    display: inline;
}

#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 588px;
    margin: 0;            
    padding: 0;
    

    animation-name: AutoSlide;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
	animation-play-state: running;
}

P.S. : J'ai trouvé tout ça sur le tuto de Geoffrey C. sur www.alsacreations.com/tuto/lire/1059-ID-slideshow-css3-animation-keyframes-automatique.html. Et ça m'étonne que cela ne fonctionne pas du coup...

Merci d'avance!


BZH

Bon ça y est, j'ai trouvé tout seul!

Juste une chose maintenant, comment faut il faire pour faire en sorte que les images aillent de la gauche vers la droite maintenant?

Mon html n'ayant oas bougé, voici mon Css fait comme il faut...

@-webkit-keyframes AutoSlide{ 
	0%, 15%, 100% {
        left: 0px; 
    }
    35%, 50% {
        left: -196px; 
    }
    70%, 85% {
        left: -392px; 
}}

@-moz-keyframes AutoSlide{
	0%, 15%, 100% {
        left: 0px;
    }
    35%, 50% {
        left: -196px;
    }
    70%, 85% {
        left: -392px; 
    } } 
	
	
@-ms-keyframes AutoSlide{
	0%, 15%, 100% {
        left: 0px; 
    }
    35%, 50% {
        left: -196px; 
    }
    70%, 85% {
        left: -392px;
    } } 
	
	
@-o-keyframes AutoSlide{ 
	0%, 15%, 100% {
        left: 0px; 
    }
    35%, 50% {
        left: -196px; 
    }
    70%, 85% {
        left: -392px; /
    }} 
	
@keyframes AutoSlide{ 
	0%, 15%, 100% {
        left: 0px; 
    }
    35%, 50% {
        left: -196px; 
    }
    70%, 85% {
        left: -392px; 
    } }    


#slideshow1 {
    position: relative;
	height : 150px;
	width : 196px;
	margin-top : -110px;
	margin-bottom : 10px;
	margin-left : 180px;
    overflow: hidden;
}

#sContent li {
    display: inline;
}

#sContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 588px;
    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 moz keyframes animation*/
	-o-animation-name: AutoSlide;
	-o-animation-duration: 10s;
	-o-animation-iteration-count: infinite;
	-o-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;
}