18041 sujets

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

Problème de slide

Bonsoir,

Je vous écrit car j'ai un gros problème, j'ai créer un slideshow mais il ne marche que sur Firefox hors j'aimerais qu'il marche sur tous les explorateurs.

Voici mon code:

<div class="slide">
				<img class="photo1" src='images/paris.jpg' width="860" height="349" alt=""/>
				<img class="photo2" src='images/devanture.jpg' width="860" height="349" alt=""/>
				<img class="photo3" src='images/hall.jpg' width="860" height="349" alt=""/>
				<img class="photo4" src='images/balcon.jpg' width="860" height="349" alt=""/>
			</div> 



.slide
{
	width:860px;
	height:349px;
	margin:0 auto;
}

.slide photo1
{
    position: absolute;
    animation: round 25s infinite;
	-webkit-animation:round 25s infinite;
	-moz-animation: round 25s infinite;
	-o-animation: round 25s infinite;
	-ms-animation: round 25s infinite;
    opacity: 0;
    top: 19px;
	
}

.slide photo2
{
    position: absolute;
   animation: round 25s infinite;
	-webkit-animation:round 25s infinite;
	-moz-animation: round 25s infinite;
	-o-animation: round 25s infinite;
	-ms-animation: round 25s infinite;
    opacity: 0;
    top: 19px; 
}

.slide photo3
{
    position: absolute;
   animation: round 25s infinite;
	-webkit-animation:round 25s infinite;
	-moz-animation: round 25s infinite;
	-o-animation: round 25s infinite;
	-ms-animation: round 25s infinite;
    opacity: 0;
    top: 19px;
}

.slide photo4
{
    position: absolute;
    animation: round 25s infinite;
	 animation: round 25s infinite;
	-webkit-animation:round 25s infinite;
	-moz-animation: round 25s infinite;
	-o-animation: round 25s infinite;
	-ms-animation: round 25s infinite;
    opacity: 0;
    top: 19px; 
}

@keyframes round
{   
    25%{opacity:1;}
    50%{opacity:0;}
}

img:nth-child(1){animation-delay:0s;}
img:nth-child(2){animation-delay:5s;}
img:nth-child(3){animation-delay:10s;}
img:nth-child(4){animation-delay:15s;}
Par avance, désolé de te répondre a coté, mais il me semble que tu te prend un peu la tête a vouloir faire cela en css.

Il y'a des plug-in jquery bien plus simple d'utilisation et qui n'auront pas de problème de compatibilité navigateur.

Par ailleur, chez moi, cela ne fonctionne même pas sous firefox (v 24.0)
C'est pour un exercice, c'est obligatoire de le faire en css.
Par contre il marche sur firefox je l'ai teste plusieurs fois et dans plusieurs endroits
J'ai pas tester, mais je trouve louche les ".slide photo1" dans le css. D'une part j'aurai tendance a mettre .slide .photo1 avec un point pour les classes photo, d'autres part je saisi pas pourquoi tu fais 4 classes photo1 2 3 4, qui au final contiennent exactement le même code css .. autant faire une seule classe photo avec une seule fois le css. Et dans le même principe, si ton slide est unique, ça serait plutôt un identifiant qu'une classe.
Apres je sais pas pour le probleme
salut,
ça ne marche pas parce que tu n'as pas préfixé les "@keyframes".
Il vaudrait mieux mettre la propriété "animation" sans préfixe en dernier, après celles préfixées.
Sujet clos
Aller à