Slider en CSS3

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

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, 11h54

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

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

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, 12h04

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, 12h07

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, 12h38

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, 16h12

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, 17h47

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, 18h04

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%;
  }
}

Slider en CSS3

CSS

Vue hybride

Discussions similaires

Partager

Partager