Diaporama qui fonctionne pas en mode site variable %.

**Marc31** · 10/03/2017, 08h30

Bonjour,

J'ai trouvé ce code sur internet, trés intéressant et qui marche trés bien pour des sites fixes.

Mais moi le site est variable donc toutes les valeurs width et height sont en pourcentage.

Je n'arrive pas à le faire fonctionner avec des valeurs en %. Si quelqu'un pouvait m'aider, merci.

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
partie html
<section id="slideshow">
 
										<div class="container">
											<div class="c_slider"></div>
											<div class="slider">
												<a href="http://www/page.php">
														<figure>
															<img src="../im/ac.png" alt="" width="964" height="249" title="Cliquer ici" />
															<!--<figcaption></figcaption>-->
 
														</figure>
												</a>
												<!--
												-->
												<a href="http://www/page.php">
														<figure>
															<img src="../images/p.png" alt="" width="964" height="249" title="Cliquer ici" />
															<figcaption>Une prise</figcaption>
														</figure>
												</a>		
												<!--
												-->
												<a href="http://www/page.php">
														<figure>
															<img src="/a.png" alt="" width="964" height="249" title="Cliquer ici" />
															<figcaption>Un</figcaption>
 
														</figure>
												</a>
												<!--
												-->
												<a href="">
														<figure>
															<img src="../t.png" alt="" width="964" height="249" title="Cliquer ici" />
															<figcaption></figcaption>
														</figure>
												</a>
												<!--
												-->
												<a href="http://www/page.php">
													<figure>
														<img src="../s.png" alt="" width="964" height="249" title="Cliquer ici" />
														<figcaption>Plusieurs</figcaption>
													</figure>
												</a>
												<!--
												-->
												<a href="http://www/page.php">
														<figure>
															<img src="../i.png" alt="" width="964" height="249" title="Cliquer ici" />
															<figcaption></figcaption>
														</figure>
												</a>
 
 
 
											</div>
										</div>
 
										<span id="timeline"></span>
									</section>

partie 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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/* gestion des dimensions et débordement du conteneur */
#slideshow .container {
	position:relative;
	width: 960px;
	height: 249px;
	overflow: hidden;
}
 
/* on prévoit un petit espace gris pour la timeline */
#slideshow .container:after {
	position:absolute;
	bottom: 0; left:0;
	content: " ";
	width: 100%;
	height: 1px;
	background: #999;
}
/* 
   le conteneur des slides
   en largeur il fait 100% x le nombre de slides
*/
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 400%;
	height: 249px;
}
 
/* annulation des marges sur figure */
#slideshow figure {
	position:relative;
	display:inline-block;
	padding:0; margin:0;
}
/* petit effet de vignette sur les images */
#slideshow figure:after {
	position: absolute;
	display:block;
	content: " ";
	top:0; left:0;
	width: 100%; height: 100%;
	box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
}
 
 
/* styles de nos légendes */
#slideshow figcaption {
	position:absolute;
	left:0; right:0; bottom: 5px;
	padding: 8px;
	margin:0;
	border-top: 0px solid rgb(225,225,225);
	text-align:center;
	letter-spacing: 0.05em;
	word-spacing: 0.05em;
	font-family: Calibri, Arial, sans-serif;
	background: #fff;
	background: rgba(255,255,255,0.7);
	color: #555;
	text-shadow: -1px -1px 0 rgba(255,255,255,0.3);
}
 
@-webkit-keyframes slider {
	0%, 15%, 100%	{ left:-49% }
	25%, 45%		{ left: -149% }
	50%, 70%		{ left: -250% }
	75%, 95%		{ left: -359% }
	75%, 95%		{ left: -450% }
 
 
}
@-moz-keyframes slider {
	0%, 15%, 100%	{ left:-49% }
	25%, 45%		{ left: -149% }
	50%, 70%		{ left: -250% }
	75%, 95%		{ left: -350% }
	75%, 95%		{ left: -450% }
 
 
}
 
/* permet de rajouter des images */
 
@keyframes slider {
	0%, 10%, 100%	{ left:-48% }
	15%, 25%		{ left: -149% }
	30%, 40%		{ left: -250% }
	45%, 55%		{ left: -350% }
	60%, 70%		{ left: -451% }
	75%, 95%		{ left: -552% }
 
}
 
 
 
 
#slideshow .slider {
	position: absolute;
	left:0; top:0;
	width: 700%;
	height: 249px;
 
	-webkit-animation: slider 25s infinite;
	-moz-animation: slider 25s infinite;
	animation: slider 25s infinite;
}
 
#timeline {
	position: absolute;
	background: #999;
	bottom: 15px;
	left: 15px;
	height: 1px;
	background: rgb(214,98,13);
	background: rgba(214,98,13,.8);
	width: 0;
	/* fonction d'animation */
	animation: timeliner 45s infinite;
}