Diaporama et compatibilité navigateurs

**Xaral** · 04/10/2019, 10h48

Bonjour à toutes et tous,

Après avoir cherché et trouvé plusieurs solutions, je suis parvenu à créé un diaporama qui enchaîne 3 images avec un effet fondu en intervalles.

jusque là, c'était plutôt l'objectif recherché. Mais... oui il y a toujours un mais.

Les fondus fonctionnent bien avec Chrome et les mobiles Androïd et iOS mais pas Firefox. Et sur IE et Edge, le diapo ne s'affiche pas du tout. Rien de surprenant et je m'y attendais à vrai dire. Les solutions que je trouve sur le net s'appliquent à d'autres méthodes de diapo que la mienne. Et j'aimerai, dans la mesure du possible, garder la méthode choisie avant de devoir tout changer.

Mon second souci, avant que je ne mette les codes plus loin, est de pouvoir placer 2 phrases fixes sur cette diapo. Technique que je connais avec les background mais que je ne parviens pas à reproduire sur une animation. Il s'agit d'un slogan et d'un lien pour les Devis et Rendez-vous alignés au centre sur l'axe horizontal. L'un au dessus et l'autre en dessous, mais à l'intérieur du conteneur animation.

Voici le code du diapo :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="d1"></div>
<div class="conteneur">	
<div class="d2"></div>
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.d2
{
	background-repeat: no-repeat;
	width: 100%;
	height: 0px;
	padding-top: 40%;
	margin: 50px auto;
	background-size: contain;
	animation: fondu 10s ease-in-out infinite both;
}
 
.conteneur
{
	max-width: 100%;
	margin: 50px auto;
}
 
@keyframes fondu
{
	0% {background-image: url("images/diapo01.jpg");}
	33.33% {background-image: url("images/diapo02.jpg");}
	66.67% {background-image: url("images/diapo03.jpg");}
	100% {background-image: url("images/diapo01.jpg");}
}