[Résolu] Problème avec background fullscreen slideshow en css

Bonjour,

je bosse sur un site sur lequel on arrive sur une splash page qui est un diapo d'images plein écran qui défilent.
J'ai trouvé un site sur lequel c'est bien expliqué et pourtant ça ne marche qu'à moitié :
j'ai 6 photos qui sont censées défiler, les trois premières défilent comme il faut, la quatrième n'apparait pas (vide de quelques secondes, peu importe quelle photo je mets), puis la cinquième apparait normalement, puis la sixième aussi. Á la fin ça recommence et rebelotte avec la quatrième qui veut pas apparaître.
Je bosse sur un wordpress en local donc je peux pas mettre de lien vers le site...

Mais voici mon html:

<ul class="cb-slideshow">
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
	<li>
		<span> </span>
	</li>
</ul>

et mon css:

.cb-slideshow,.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.cb-slideshow li span { 
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 36s linear 0s infinite ; 
}
.cb-slideshow li:nth-child(1) span { 
    background-image: url("images/dany-jung-credit-daniel-michelon-1.jpg") 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url("images/esther-credit-daniel-michelon.jpg");
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url("images/esther-credit-daniel-michelon-1.jpg");
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url("images/storytelling.jpg") 
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url("images/dany-jung-credit-daniel-michelon-18.jpg");
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url("images/cirque.jpg");
    animation-delay: 30s; 
}


@keyframes imageAnimation { 
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
.no-cssanimations .cb-slideshow li span{
	opacity: 1;

voilà, je prie pour que quelqu'un m'éclaire de sa lumière...
Modifié par Isaabelle (14 Mar 2020 - 15:51)

Oups il manquait un point virgule, trop bête ! Mon sujet est donc inutile, le modérateur peut le supprimer

Jean-Pierre-Bruneau a écrit :
Bravo ton site est très beau,

Merci, mais tu parles de quel site? Celui pour lequel je posais ma question (mais logiquement non vu qu'il n'est pas en ligne) ou de mon site perso, www.lamareauxpapillons.com ?

Ah oui probablement qu'il a des problèmes mais justement je lui refait un site neuf sur wordpress
Mais merci de la mise en garde !