Slider en CSS3

**IED factory** · 21/03/2018, 10h48

Bonjour,

J'ai essayé d'adapter un tuto pour un slder en CSS3, mais je me retrouve, sans que cela fonctionne, avec mes deux bandeaux l'un au dessus de l'autre...

Merci de votre aide ?

le code HTML:

Code html :

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

1
2
3
4
5
6
<div id="slidebanner">
<ul id="sContent">
<li><a href="https://www.monsite.com" target="_blank"><img src="https://www.monsite/bannierre-haute-1.jpg" alt="Nouveau site 1" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
<li><a href="https://www.monsite2.com" target="_blank"><img src="https://www.monsite2.com/bannierre-haute-2.jpg" alt="Mon site 2, découvrez ce site !" style="margin-left: auto; margin-right: auto;" width="1100px" height="61px" /></a></li>
</ul>
</div>

le 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
 
@keyframes AutoSlide {
from 0s to 0s, from 0s to 3s {
left: 0px; /*1ère image*/
}
from 3s to 3s, from3s to 6s {
left: -1100px; /*2ème image*/
}
}
#slidebanner {
position: relative;
width: 100%;
height: 100%;
margin: 0px;
overflow: hidden;
}
#sContent li {
display: inline;
}
#sContent {
position: absolute;
top: 0;
left: 0;
width: 1100px;
margin: 0;
padding: 0;
/*CSS3 keyframes animation*/
animation-name: AutoSlide;
-webkit-animation-name: AutoSlide;
-moz-animation-name: AutoSlide;
-o-animation-name: AutoSlide;
animation-duration: 6s;
-webkit-animation-duration: 6s;
-moz-animation-duration: 6s;
-o-animation-duration: 6s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-o-animation-timing-function: linear;
}

Merci d'avance !

**NoSmoking** · 21/03/2018, 10h54

Bonjour,
tu peux toujours regarder : Diaporama avec défilement automatique.

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

Merci beaucoup, il n'y a pas l'HTML mais je regarderai le code...
Sinon une analyse du code que j'ai fait ?

**NoSmoking** · 21/03/2018, 11h04

Le code est dynamique mais ressemble à cela pour 4 images

Code html :

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

1
2
3
4
5
6
7
8
<div class="cadre">
  <ul id="diapo" class="diaporama">
    <li data-num="1"><img src="images/image_001.jpg" alt="image_001.jpg"></li>
    <li data-num="2"><img src="images/image_002.jpg" alt="image_002.jpg"></li>
    <li data-num="3"><img src="images/image_003.jpg" alt="image_003.jpg"></li>
    <li data-num="4"><img src="images/image_004.jpg" alt="image_004.jpg"></li>
  </ul>
</div>

**IED factory** · 21/03/2018, 11h07

Merci beaucoup de votre réactivité !
je regarderai tout cela cet am ou ce soir et je reviendrai vers vous ! merci encore !

**IED factory** · 23/03/2018, 11h38

Bonjour,
je reviens vers vous et je voulais vous demander sur le paramétrage du slider de votre lien, si on pouvez faire une boucle plutôt qu'un retour ?

**IED factory** · 23/03/2018, 15h12

Dans votre code HTML il y a quelque chose que je ne comprends pas :
Quel est cet class cadre, alors qu'on appelle dans le CSS une class diaporama et où se trouve cet ID diapo ?
Merci de votre retour...

**JefReb** · 23/03/2018, 16h47

Et comme ceci:

Code html :

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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
</head>
<!-- =================================================================================    --> 
<style type="text/css">
div#diapo { overflow: hidden; }
div#diapo { width:500px; height:auto; }
div#diapo div > img { width: 20%; float: left; }
div#diapo div { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 8s scroll infinite; 
}
@keyframes scroll {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
</style>
 
<body>
<div id="diapo">
<div>
<img src="images/image_001.jpg" alt="1"></li>
<img src="images/image_002.jpg" alt="2"></li>
<img src="images/image_003.jpg" alt="3"></li>
<img src="images/image_004.jpg" alt="4"></li>
<img src="images/image_005.jpg" alt="5>"></li>
</div>
</div>
</body>
</html>

avec des images de 100px évidemment à adapter ...

**IED factory** · 23/03/2018, 16h52

Envoyé par JefReb

Et comme ceci:

je termine celui en premier et reviens vers vous ensuite... Merci de votre contribution...

**IED factory** · 23/03/2018, 17h04

Je viens de faire un test avec cela et cela ne fonctionne pas non plus...:
HTML bien sût il y a le lien vers les images dans les li

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="slidebanner">
<ul id="sContent">
<li ></li>
<li ></li>
<li ></li>
<li ></li>
<li ></li>
<li ></li>
<li ></li>
</ul>
</div>

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
#slidebanner {
	position: relative;
	width: 100%;
	height: 100%;
	margin:  0px;
	overflow: hidden;
}
 
#sContent li {
	display: inline;
}
 
.diaporama {
  animation: slide 36s ease infinite 0s;
  width: 700%;
}
@keyframes Slide {
  0%, 11.11%, 100% {
    left: 0;
  }
  13.89%, 25% {
    left: -100%;
  }
  27.78%, 38.89% {
    left: -200%;
  }
  41.67%, 52.78% {
    left: -300%;
  }
  55.56%, 66.67% {
    left: -400%;
  }
  69.44%, 80.56% {
    left: -500%;
  }
  83.33%, 94.44% {
    left: -600%;
  }
}

**JefReb** · 23/03/2018, 18h07

HTML bien sût il y a le lien vers les images dans les li

J'ai beau chercher, vois pas trop où est le lien vers les images ....

**IED factory** · 23/03/2018, 18h20

Ils ne sons pas mentionné bien sûr ! Le problème vient du CSS qui ne fonctionne pas et de la corrélation entre les ID et les class, il doit y avoir un problème certainement, mais cela m'échappe...

**NoSmoking** · 24/03/2018, 07h41

Quel est cet class cadre, alors qu'on appelle dans le CSS une class diaporama et où se trouve cet ID diapo ?

Dans une construction comme

Code html :

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

1
2
3
4
5
6
7
8
<div class="cadre">
  <ul class="diaporama">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

le conteneur, ici class="cadre" sert de référence, c'est la fenêtre d'affichage dans laquelle on voit apparaître le défilement de la liste <ul>.

L'id="diapo" ne sert ici qu'à générer dynamiquement le HTML, tu peux le supprimer dans une version statique.

(...) si on pouvez faire une boucle plutôt qu'un retour ?

oui mais il faut pour cela mettre le temps de retour à zéro (à faire avec l'outil), recalculer les pourcentages de l'animation mais surtout modifier la première valeur de la première règle !!!!! (pas clair hein !)

Cela donnerait par exemple
• diaporama avec retour :

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
.diaporama {
  animation: slide 12.5s ease infinite 0s;
  width: 400%;
}
@keyframes slide {
  0%, 16%, 100% {
    left: 0;
  }
  28%, 44% {
    left: -100%;
  }
  56%, 72% {
    left: -200%;
  }
  84%, 100% {
    left: -300%;
  }
}

• diaporama en boucle :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@keyframes slide {
  28%, 100% {    /* ici le 0% est devenue 28 % */
    left: 0;
  }
  28%, 44% {
    left: -100%;
  }
  56%, 72% {
    left: -200%;
  }
  84%, 100% {
    left: -300%;
  }
}

bien sûr cette valeur, le 28%, est à ajuster

Nota : avec ces valeurs la première translation est plus longue que les autres d'où la nécessité de recalculer, ou d'ajuster.

Tu as également le Diaporama avec effet fade in/out qui lui est en boucle.

**IED factory** · 24/03/2018, 09h30

Merci de tout cela, je regarde cela dans la journée ou demain et reviens vers vous..

**IED factory** · 27/03/2018, 09h23

J'avais oublié l'afffichage en ligne

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<div>
  <ul id="sContent" class="diaporama">
    <li nth-child(1)><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 nth-child(2)><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 nth-child(3)><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 nth-child(4)><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 nth-child(5)><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 nth-child(6)><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 nth-child(7)><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>

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
/* Affichage en ligne */
#sContent li {
	display: inline;
}
 
/* définition de l'animation sur les images */
.diaporama img {
  animation: fade-in-out 28s ease infinite 0s;
  opacity: 0;
}
/* définition délai des images */
.diaporama img:nth-child(1) { animation-delay: 0s;}
.diaporama img:nth-child(2) { animation-delay: 4s;}
.diaporama img:nth-child(3) { animation-delay: 8s;}
.diaporama img:nth-child(4) { animation-delay: 12s;}
.diaporama img:nth-child(5) { animation-delay: 16s;}
.diaporama img:nth-child(6) { animation-delay: 20s;}
.diaporama img:nth-child(7) { animation-delay: 24s;}
/* définition des étapes */
@keyframes fade-in-out {
  0%, 100% {
    opacity: 0;
  }
  3.57% {
    opacity: 1;
  }
  14.29% {
    opacity: 1;
  }
  17.86% {
    opacity: 0;
  }
}

Cela ne fonctionne pas...
C’est peut-être du au module que j'utilise dans mon CMS ?

Invité · 27/03/2018, 10h29

Bonjour,

Code html :

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

<li nth-child(1)>...

kezako ??

ça n'existe pas...

De plus, il manque une partie du CSS :

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
25
.cadre {
    position: relative;
    width: 400px;
    height: 300px;
    margin: 0 5em;
    border: 6px solid #FFF;
    overflow: hidden;
    box-shadow: 1px 1px 20px #888;
    border-radius: 5px;
}
 
.diaporama {
    position: relative;
    top: 0;
    left: 0;
    height: 100%;
    margin: 0;
    padding: 0;
}
.diaporama img {
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
}

A adapter aux dimensions de tes images.

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

Bonjour et merci de ce retour ; c'est comme cela que sont nommé dans le CSS les images, du moins c'est que j'ai cru comprendre...

Code :

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

img:nth-child(1)

**NoSmoking** · 27/03/2018, 10h43

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.