Discussion :

[Marc31]

Bonjour à tous,


J'ai trouvé ce code sur internet qui fonctionne très bien mais j'aimerais ajouter une photo de plus et là je n'y arrive pas...

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
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>
 
 
 
 
css
 
 
@keyframes slidy {
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%; }
}
 
body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

[vttman]

[EDIT] en supposant que le code fourni fonctionnait correctement pour 5 images ...

Code :

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

1
2
3
4
5
6
7
8
9
10
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
</figure>
</div>

=>
5 images

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
css
 
 
@keyframes slidy {
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%; }
}

=>
0%,-100%,-200%,-300%,-400% pour les 5 images

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

=>
500% et 30s pour les 5 images
Tiens un 20% aussi ?

Je propose

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<base href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/">
<div id="slider">
<figure>
<img src="austin-fireworks.jpg" alt>
<img src="taj-mahal_copy.jpg" alt>
<img src="ibiza.jpg" alt>
<img src="ankor-wat.jpg" alt>
<img src="austin-fireworks.jpg" alt>
<img src="newimage.jpg" alt>
</figure>
</div>

=> Je rajoute une image ...

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

@keyframes slidy {
0% { left: 0%; }
15% { left: 0%; }
20% { left: -100%; }
35% { left: -100%; }
40% { left: -200%; }
55% { left: -200%; }
60% { left: -300%; }
75% { left: -300%; }
80% { left: -400%; }
95% { left: -400%; }
100% { left: -500%; }
}
 
body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 16.67%; float: left; }
div#slider figure { 
  position: relative;
  width: 600%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 42s slidy infinite; 
}

=>
De 500% je passe à 600%
Pour le 20% donc 100/5 je suppose, je passe à 100/6 soit 16.67%

J'étalonne différemment le temps entre chaque image
et j'allonge l'animation 30 s => 5 images donc 6*6s pour 6 images


A tester bien sûr ... et me dire !?

[Marc31]

Merci et qu'elle rapidité par contre ça bug un peu....il me mets la dernière image sous la seconde image...par contre il y a bien l'espace blanc à la fin pour la derniere image.

[vttman]

Est-ce que le code fourni au début ... marchait tel quel ou avait-il
déjà été modifié même partiellement, si oui re-fournir le code qui marchait d'origine ?

[Marc31]

le code marchait d'origine et j'ai mis le code d'origine. Parce que j'ai testé mais cela ne marchait pas donc voilà...

[vttman]

Soyons alors plus précis ...
Remplacer

Code :

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

div#slider figure img { width: 16.67%; ...

par

Code :

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

div#slider figure img { width: 16.666%; ...