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

[Marc31]

Bravooooo et merci c'est ça......j'aurais jamais trouvé!!!!
Par contre la derniere photo reste vraiment pas logntemps comment je peux rallonger le temps de la derniere photo?

[vttman]

Là il faut jouer sur les écart de % sur cette partie
=>
exemple

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 slidy {
0% { left: 0%; }
15% { left: 0%; }
20% { left: -100%; }
32% { left: -100%; }
37% { left: -200%; }
49% { left: -200%; }
54% { left: -300%; }
66% { left: -300%; }
70% { left: -400%; }
83% { left: -400%; }
100% { left: -500%; }
}

[Marc31]

Oui mais j'arrive pas à cerner la logique du découpage, il faut laisser un interval entre chaque diapo?
20% { left: -100%; }
32% { left: -100%; }

Donc pour la derniere il faut un truc du genre?

90% { left: -500%; }
100% { left: -500%; }

[vttman]

Ceci

Code :

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

animation: 42s

indique que l'animation (un cycle sur 5 images) durera 42s
ensuite
ceci

Code :

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

1
2
3
4
@keyframes slidy {
0% { left: 0%; }
15% { left: 0%; }
...

de 0%(0s) à 15%(42*15/100 => 6.3s) affichage 1 ère image donc environ 6s

Code :

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

1
2
3
4
5
 
...
20% { left: -100%; }
32% { left: -100%; }
...

de 15%(6.3s) à 20%(42*20/100 => 8.4s) transition entre la 1 ère image et la 2ème image environ 2s

de 20%(8.4s) à 32%(42*32/100 => 13.4s) affichage 2 ème image donc environ 5s

etc .

[Marc31]

Parfait et encore merci, j'ai trouvé un découpage nickel.

Je le mets au cas où cela pourrait servir à d'autres.

Bonne journée.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
0% { left: 0%; }
10% { left: 0%; }
18% { left: -100%; }
28% { left: -100%; }
36% { left: -200%; }
46% { left: -200%; }
54% { left: -300%; }
64% { left: -300%; }
72% { left: -400%; }
82% { left: -400%; }
90% { left: -500%; }
100% { left: -500%; }