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

Slider en CSS3

CSS

Vue hybride

Discussions similaires

Partager

Partager