Slider en CSS3

**IED factory** · 27/03/2018, 10h59

Envoyé par NoSmoking

Attention !!! Tu as modifié la structure de l'exemple donc il te faut appliquer le style sur les <li> et non sur les <img>.

Désolé, j'ai pas compris ce que vous esssayez de me dire... Merci de votre patience...

Envoyé par NoSmoking

De grâce supprime le « style inline » et comme dit les nth-child(1) n'ont rien à faire dans les balises.

OK cela est fait... mais comme j'ai pas compris eu-dessus...
Désolé...

**IED factory** · 27/03/2018, 11h04

Envoyé par NoSmoking

Attention !!! Tu as modifié la structure de l'exemple donc il te faut appliquer le style sur les <li> et non sur les <img>.

De grâce supprime le « style inline » et comme dit les nth-child(1) n'ont rien à faire dans les balises.

Comme cela ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div>
  <ul >
    <li class="diaporama"><a href="https://www.monsite1.com" target="_blank"><img src="https://www.monsite1.com/images/banniere-haute-monsite1.jpg" alt="monsite1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> 
    <li class="diaporama"><a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/images/banniere-haute-monsite2.jpg" alt="monsite2" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li class="diaporama"><a href="https://www.monsite3.com" target="_blank"><img src="https://www.monsite3.com/images/banniere-haute-monsite3.png" alt="monsite3" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li class="diaporama"><a href="https://www.monsite4.com" target="_blank"><img src="https://www.monsite4.com/images/banniere-haute-monsite4.jpg" alt="monsite4" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li class="diaporama"><a href="https://www.monsite5.com" target="_blank"><img src="https://www.monsite5.com/images/banniere-haute-monsite5.png" alt="monsite5" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li class="diaporama"><a href="https://www.monsite6.com" target="_blank"><img src="https://www.monsite6.com/images/banniere-haute-monsite6.jpg" alt="monsite6" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li class="diaporama"><a href="https://www.monsite7.com" target="_blank"><img src="https://www.monsite7.com/images/banniere-haute-monsite7.jpg" alt="monsite7" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
  </ul>
</div>

............non je pense que c'est plutôt comme cela ?

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div>
  <ul >
    <li><a href="https://www.monsite1.com" target="_blank"><img class="diaporama" src="https://www.monsite1.com/images/banniere-haute-monsite1.jpg" alt="monsite1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li> 
    <li><a href="https://www.monsite2.com" target="_blank"><img class="diaporama" src="https://www.monsite2.com/images/banniere-haute-monsite2.jpg" alt="monsite2" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li><a href="https://www.monsite3.com" target="_blank"><img class="diaporama" src="https://www.monsite3.com/images/banniere-haute-monsite3.png" alt="monsite3" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li><a href="https://www.monsite4.com" target="_blank"><img class="diaporama" src="https://www.monsite4.com/images/banniere-haute-monsite4.jpg" alt="monsite4" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li><a href="https://www.monsite5.com" target="_blank"><img class="diaporama" src="https://www.monsite5.com/images/banniere-haute-monsite5.png" alt="monsite5" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li><a href="https://www.monsite6.com" target="_blank"><img class="diaporama" src="https://www.monsite6.com/images/banniere-haute-monsite6.jpg" alt="monsite6" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
    <li><a href="https://www.monsite7.com" target="_blank"><img class="diaporama" src="https://www.monsite7.com/images/banniere-haute-monsite7.jpg" alt="monsite7" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
  </ul>
</div>

**NoSmoking** · 27/03/2018, 13h07

• Inutile de compliquer la structure, celle ci dessous suffit

Code html :

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

1
2
3
4
5
6
7
8
9
<div class="diaporama">
  <a href="https://www.monsite1.com" target="_blank"><img src="https://www.monsite1.com/images/banniere-haute-monsite1.jpg" alt="monsite1"></a> 
  <a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/images/banniere-haute-monsite2.jpg" alt="monsite2"></a>
  <a href="https://www.monsite3.com" target="_blank"><img src="https://www.monsite3.com/images/banniere-haute-monsite3.png" alt="monsite3"></a>
  <a href="https://www.monsite4.com" target="_blank"><img src="https://www.monsite4.com/images/banniere-haute-monsite4.jpg" alt="monsite4"></a>
  <a href="https://www.monsite5.com" target="_blank"><img src="https://www.monsite5.com/images/banniere-haute-monsite5.png" alt="monsite5"></a>
  <a href="https://www.monsite6.com" target="_blank"><img src="https://www.monsite6.com/images/banniere-haute-monsite6.jpg" alt="monsite6"></a>
  <a href="https://www.monsite7.com" target="_blank"><img src="https://www.monsite7.com/images/banniere-haute-monsite7.jpg" alt="monsite7"></a>
</div>

la class est reportée sur le conteneur <div>.

• Concernant le style des images il suffit de mettre dans la partie <style> de la feuille

Code :

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

1
2
3
4
.diaporama img {
  width: 1100px;
  height: 61px;
}

c'est quand même plus propre !

• Avec cette nouvelle structure il faut appliquer les effets sur les balises <a>.

Code :

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
25
26
27
28
29
30
31
32
33
34
35
36
.diaporama {
  position: relative;
}
.diaporama a {
  position: absolute;
  top: 0;
  left: 0;
}
/* définition de l'animation sur les images */
.diaporama a {
  animation: fade-in-out 14s ease infinite 0s;
  opacity: 0;
}
/* définition délai des images */
.diaporama a:nth-child(1) { animation-delay: 0s;}
.diaporama a:nth-child(2) { animation-delay: 2s;}
.diaporama a:nth-child(3) { animation-delay: 4s;}
.diaporama a:nth-child(4) { animation-delay: 6s;}
.diaporama a:nth-child(5) { animation-delay: 8s;}
.diaporama a:nth-child(6) { animation-delay: 10s;}
.diaporama a:nth-child(7) { animation-delay: 12s;}
/* définition des étapes */
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  7.14% {
    opacity: 1;
  }
  14.29% {
    opacity: 1;
  }
  21.43% {
    opacity: 0;
  }
}

On ne doit être pas loin de la vérité

**IED factory** · 27/03/2018, 14h40

YES pas loin en effet !
J'ai voulu rajouter les margin dans le style et ils ne sont pas pris en compte !!???

Code :

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

1
2
3
4
5
6
7
 
.diaporama img {
  width: 1100px;
  height: 61px;
  margin-left: auto;
  margin-right: auto;
}

**IED factory** · 27/03/2018, 15h34

J'ai rajouté dans le code HTML

Code html :

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

<div class="diaporama" style="text-align: center;">

et les bannières sont bien centré dans l'éditeur du module, mais je crois, peut-être à tort que cela est incompatible avec le style

Code :

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

1
2
3
4
5
6
7
8
.diaporama {
  position: relative;
}
.diaporama a {
  position: absolute;
  top: 0;
  left: 0;
}

Votre avis ?

**IED factory** · 27/03/2018, 16h07

Autres problèmes les liens qui sont à chaque image ne fonctionnent pas, le dernier lien de la dernière image est rattachée à toutes les images ??!!

**NoSmoking** · 27/03/2018, 17h10

A mettre dans la partie <style>.

et les bannières sont bien centré dans l'éditeur du module, mais je crois, peut-être à tort que cela est incompatible avec le style

ne pas confondre mise en forme du contenu et mise en forme du conteneur !

(...)les liens qui sont à chaque image ne fonctionnent pas(...)

le fait qu'ils ne se voient ne les empêche pas d'être présent mais empilés ce qui fait que le dernier est dessus et reçoit le click.

Pour contrer ce comportement il te suffit de placer l'élément actif, celui que l'on voit, au dessus du panier en lui affectant un z-index:1 par exemple, dans les autres cas il aura un z-index:0.

Concrètement cela modifie le CSS de la façon suivante

Code :

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

1
2
3
4
5
6
/* définition de l'animation sur les images */
.diaporama a {
  animation: fade-in-out 14s ease infinite 0s;
  opacity: 0;
  z-index : 0;
}

et les étapes deviennent

Code :

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
/* définition des étapes */
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  7.14% {
    opacity: 1;
    z-index: 1;
  }
  14.29% {
    opacity: 1;
    z-index: 1;    
  }
  21.43% {
    opacity: 0;
  }
}

**IED factory** · 27/03/2018, 17h38

ne pas confondre mise en forme du contenu et mise en forme du conteneur !

C'est bien ce que j'avais fait au début, mais cela ne fonctionne pas non plus... mais je crois comprendre ce que vous dites...

le fait qu'ils ne se voient ne les empêche pas d'être présent mais empilés ce qui fait que le dernier est dessus et reçoit le click.

OUI tout à fait ! je les vois en examinant le code !

Pour contrer ce comportement il te suffit de placer l'élément actif, celui que l'on voit, au dessus du panier en lui affectant un z-index:1 par exemple, dans les autres cas il aura un z-index:0.

C’est beau la compétence...

Concrètement cela modifie le CSS de la façon suivante

Merci beaucoup !Je sais que je suis un boulet et je vous remercie encore de votre patience et de votre pédagogie..
Je reviens vers vous demain...
Bonne soirée...

**IED factory** · 28/03/2018, 11h06

Bonjour NoSmoking et encore merci !

Les tests sont proches de la perfection, mais je n'avais pas le lien de la première bannière actif alors j'ai modifié le style comme cela :

Code :

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
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
    z-index: 1;
  }
  7.14% {
    opacity: 1;
    z-index: 1;
  }
  14.29% {
    opacity: 1;
    z-index: 1;    
  }
  21.43% {
    opacity: 0;
    z-index: 1;
  }
}

Cela fonctionne lors de la première boucle, mais lors de la seconde boucle et suivantes, le premier de la la première bannière est celui de la deuxième bannière et je ne trouve pas comme faire pour quelque soit le nombre de boucle la prmière bannière est bien son lien actif ?
Merci...

**IED factory** · 28/03/2018, 13h59

Pour le centrage des bannières images, j'avis oublié simplement que textalign:center ne fonctionne pas avec la position absolute
donc

Code :

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

1
2
3
4
5
6
7
.diaporama a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 35px;
}

mais j'ai toujours ce problème de lien sur la première bannière un fois la boucle faite...

**NoSmoking** · 28/03/2018, 14h58

Visiblement tu n'as pas saisi l'utilité du z-index !
Comme je l'ai écrit

Pour contrer ce comportement il te suffit de placer l'élément actif, celui que l'on voit, au dessus du panier en lui affectant un z-index:1 par exemple, dans les autres cas il aura un z-index:0.

il se peut néanmoins qu'il y ait un peu de latence entre le passage du dessus au dessous, là cela va dépendre des navigateurs.

**IED factory** · 28/03/2018, 15h04

Je suis un vrai boulet oui ! Comme cela donc ?

Code :

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
keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
    z-index: 1;
  }
  7.14% {
    opacity: 1;
    z-index: 0;
  }
  14.29% {
    opacity: 1;
    z-index: 0;    
  }
  21.43% {
    opacity: 0;
    z-index: 0;
  }
}

Invité · 28/03/2018, 15h05

cela va dépendre des navigateurs

Et peut-être aussi de la durée de la transition (fade), non ? (je suis la discussion de loin... )

**IED factory** · 28/03/2018, 15h11

Envoyé par jreaux62

Et peut-être aussi de la durée de la transition (fade), non ? (je suis la discussion de loin... )

35 secondes au total avec un fade de 1 seconde et un arrêt de 4 et 7 images...

**NoSmoking** · 28/03/2018, 15h32

Envoyé par IED factory

Je suis un vrai boulet oui ! Comme cela donc ?

Non l'inverse, normalement le z-index:0 est repris par défaut en l’absence de propriété définie.

Si tu avais une page en ligne pour que l'on puisse se rendre compte.

@jreaux62 :
je n'avais même pas fait attention que j'ai mis en exemple des valeurs pour le moins un peu farfelues

**IED factory** · 28/03/2018, 15h39

C'sts que que j'avais fait et cela ne fonctionne plus au bout d'une boucle...
https://www.chaine-oregon-chs.com
merci encore de votre aide...

**NoSmoking** · 28/03/2018, 19h11

Le problème est ailleurs comme disait Claude Rich.

Ta <div class="diaporama"> n'a pas de hauteur puisqu'elle contient des éléments en position:absolute.

Tu places tes <a> en top:50% (qui est la dimension du parent), donc 50% de rien = 0, puis tu les translates de 50% (là c'est sa dimension) dont tu es obligé de mettre un padding-top: 35px pour compenser ce qui au final fait que l'<img> est décalée par rapport au <a>, mets un background pour voir.

Fixe une hauteur à ta <div class="diaporama"> et supprime le sur les <a>.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
.diaporama {
  position: relative;
  height: 65px;
}
.diaporama a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*! padding-top: 35px; */
}

**IED factory** · 29/03/2018, 09h07

Bonjour NoSmoking et merci pour cette précision que j'ai appliqué et modifié aussi du coup le bloc parent dans le global.css pour que tout cela soit en place !
MAIS... il y a toujours au bout d'une boucle du slider le lien des bannières qui renvoit toujours sur la dernière...
Avez-vous cliqué sur chaque bannière jusque cela fasse un tour ? Quand on arrive au deuxième tour c'est toujours le lien de la dernière bannière qui prend le dessus sur les autres..
Merci de votre patience et de votre gentillesse...

Invité · 29/03/2018, 10h42

Bonjour,

si tu ne remets pas ton code, on ne peut pas tester...

**IED factory** · 29/03/2018, 10h47

Pardon...
CSS

Code :

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.diaporama {
  position: relative;
  height: 65px;
}
.diaporama a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
.diaporama img {
  width: 1100px;
  height: 61px;
}
 
.diaporama a {
 animation: fade-in-out 35s ease infinite 0s;
  opacity: 0;
  z-index : 0;
}
 
.diaporama a:nth-child(1) { animation-delay: 0s;}
.diaporama a:nth-child(2) { animation-delay: 5s;}
.diaporama a:nth-child(3) { animation-delay: 10s;}
.diaporama a:nth-child(4) { animation-delay: 15s;}
.diaporama a:nth-child(5) { animation-delay: 20s;}
.diaporama a:nth-child(6) { animation-delay: 25s;}
.diaporama a:nth-child(7) { animation-delay: 30s;}
 
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
    z-index: 0;
  }
  7.14% {
    opacity: 1;
    z-index: 1;
  }
  14.29% {
    opacity: 1;
    z-index: 1;    
  }
  21.43% {
    opacity: 0;
    z-index: 1;
  }
}

lien : https://www.chaine-oregon-chs.com

Slider en CSS3

CSS

Discussions similaires

Partager

Partager