slider responsive ajouter un image

Version imprimable

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:

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

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

Code:

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:

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:

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:

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:

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 !?

15/03/2017, 15h00
Marc31

slider responsive ajouter un image

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.
15/03/2017, 15h11
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 ?
15/03/2017, 15h21
Marc31

slider responsive ajouter un image

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à...
15/03/2017, 15h36
vttman

Soyons alors plus précis ...
Remplacer

Code:

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

par

Code:

div#slider figure img { width: 16.666%; ...
15/03/2017, 15h41
Marc31

slider responsive ajouter un image

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?

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

Code:

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

15/03/2017, 18h39
Marc31

slider responsive ajouter un image

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%; }
15/03/2017, 19h04
vttman
Ceci

Code:

animation: 42s

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

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:

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 .

slider responsive ajouter un image

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:

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