28172 sujets

CSS et mise en forme, CSS3

Slider animation Keyframe

Bonsoir, j'ai un slider de 7 images (dans une div de width: 700%).
Seulement, je ne sait pas quoi mettre dans le {left: ???%} de mon keyframes dans le CSS pour l'animation de défilement.

le voici :
@keyframes slider-sw {
    0% {left: 0%;}
    20% {left: 0%;}
    25% {left: -101%;}
    45% {left: -101%;}
    50% {left: -201%;}
    70% {left: -201%;}
    75% {left: -301%;}
    95% {left: -301%;}
    100% {left: 0%;}
}

Modifié par Dayka (28 Nov 2019 - 20:38)
Bonjour,
je n'ai pas bien compris ta question, mais à la vue de ton html, je crois utiliser le même slider sur l'un de mes sites. Je te donnes par conséquent le css qui va avec. C'est un slider minimaliste, à défilement automatique avec possibilité d'arrêt mais sans flèches. Sans js, on ne peut pas attendre des fonctions avancées d'un slider, mais il fonctionne bien. Je pense avoir répondu à ta question. Les valeurs sont légèrement différentes chez moi, à cause du width:600%.

@keyframes slidy {
0% {left:0%;}
10% {left:0%; }
20% {left:-100%; }
30% {left:-100%; }
40% {left:-200%; }
50% {left:-200%; }
60% {left:-300%; }
70% {left:-300%; }
80% {left:-400%; }
90% {left:-400%; }
100% {left:-500%;}
}



div#slider {overflow:hidden;}
div#slider figure img {width:16.65%; float:left;}
div#slider figure { 
  position:relative;
  width:600%;
  margin:0; 
  left:0;
  text-align:left; 
  animation: 20s slidy infinite; animation-direction: alternate;}
#slider figure:hover {animation-play-state:paused;}

C'est la dernière ligne de code qui gère l'animation.
Bongota a écrit :
Bonjour,
je n'ai pas bien compris ta question, mais à la vue de ton html, je crois utiliser le même slider sur l'un de mes sites. Je te donnes par conséquent le css qui va avec. C'est un slider minimaliste, à défilement automatique avec possibilité d'arrêt mais sans flèches. Sans js, on ne peut pas attendre des fonctions avancées d'un slider, mais il fonctionne bien. Je pense avoir répondu à ta question. Les valeurs sont légèrement différentes chez moi, à cause du width:600%.

@keyframes slidy {
0% {left:0%;}
10% {left:0%; }
20% {left:-100%; }
30% {left:-100%; }
40% {left:-200%; }
50% {left:-200%; }
60% {left:-300%; }
70% {left:-300%; }
80% {left:-400%; }
90% {left:-400%; }
100% {left:-500%;}
}



div#slider {overflow:hidden;}
div#slider figure img {width:16.65%; float:left;}
div#slider figure { 
  position:relative;
  width:600%;
  margin:0; 
  left:0;
  text-align:left; 
  animation: 20s slidy infinite; animation-direction: alternate;}
#slider figure:hover {animation-play-state:paused;}

C'est la dernière ligne de code qui gère l'animation.





Merci beaucoup pour ta réponse !
Je me demandais donc quelle valeurs je devais mettre dans le keyframe vu que j'ai ma div de 700%, quelles sont les pourcentages que je devrais mettre aux niveaux des left: xxx% ?
comme ici sur ton code 

@keyframes slidy {
0% {left:0%;}
10% {left:0%; }
20% {left:-100%; }
30% {left:-100%; }
40% {left:-200%; }
50% {left:-200%; }
60% {left:-300%; }
70% {left:-300%; }
80% {left:-400%; }
90% {left:-400%; }
100% {left:-500%;}
}


mais en tenant compte de ma div de 700%
Modifié par Dayka (29 Nov 2019 - 17:49)
Tu as de la chance, j'avais sauvegardé ça.
--------
Dans le CSS, la largeur de l’élément figure est un pourcentage, qui est un multiple de la div qui le contient. Autrement dit, si la bande d’images contient cinq images, et que la div n’en montre qu’une, la figure est 5x plus large, c’est à dire 500% la largeur de la div container.

######### Calculs pour le slider.

Régler l'espace pour chaque image :

div#slider figure img {width:....}

Prendre 100% et diviser par le nombre d'images.
100% / 6 = 16.65% pour width.

Régler la durée de chaque image :

@keyframe slidy

Pourcentage de droite = Augmenter de 100% à chaque nouvelle image.
Pourcentage de gauche = De 0% à 100%, diviser équitablement par le nombre d'images.

Général :
div#slider figure {whidth....}

Augmenter de 100% à chaque nouvelle image et toutes les images doivent avoir la même largeur. La hauteur importe peu.
---------
Tout ça est un peu dépassé, il y a des sliders beaucoup plus performants, à ce jour. Le fait est que sans js, tu devras toujours effectuer des calculs à chaque nouvelle image ajoutée ou retranchée. Enfin, le mien fonctionne bien pour ce que je lui demande, et il est responsive.
Meilleure solution
Bongota a écrit :
Tu as de la chance, j'avais sauvegardé ça.
--------
Dans le CSS, la largeur de l’élément figure est un pourcentage, qui est un multiple de la div qui le contient. Autrement dit, si la bande d’images contient cinq images, et que la div n’en montre qu’une, la figure est 5x plus large, c’est à dire 500% la largeur de la div container.

######### Calculs pour le slider.

Régler l'espace pour chaque image :

div#slider figure img {width:....}

Prendre 100% et diviser par le nombre d'images.
100% / 6 = 16.65% pour width.

Régler la durée de chaque image :

@keyframe slidy

Pourcentage de droite = Augmenter de 100% à chaque nouvelle image.
Pourcentage de gauche = De 0% à 100%, diviser équitablement par le nombre d'images.

Général :
div#slider figure {whidth....}

Augmenter de 100% à chaque nouvelle image et toutes les images doivent avoir la même largeur. La hauteur importe peu.
---------
Tout ça est un peu dépassé, il y a des sliders beaucoup plus performants, à ce jour. Le fait est que sans js, tu devras toujours effectuer des calculs à chaque nouvelle image ajoutée ou retranchée. Enfin, le mien fonctionne bien pour ce que je lui demande, et il est responsive.


D'accord, merci beaucoup pour ta réponse et ton temps ! Smiley biggrin
Merci j'ai pu régler le défilement de mon slider, seulement, j'ai remarqué que la dernière image ne s'affiche pas car quand j'enlève le overflow: hidden , je remarque que la dernière image s'affiche en dessous de la première, et non comme les autres a droite de la première.
(désolé je ne sait pas si c'est claire).
aliasdmc a écrit :
Bonjour Dayka,
dans #slideshow-sw .slider-sw {} le width doit faire Nombre d'image (figure) * 100%
Exemple :
https://codepen.io/Zonecss/pen/KKwPMBm


C'est ce que j'ai fait, j'ai 7 images dans mon slider donc je lui ai donné une width de 700% mais la dernière image n'est toujours pas dans le sillage des autres..
Bonjour Dayka,
Essaye cela : 
#slideshow-sw .slider-sw {
	position: absolute;
	left:0; top:0;
	width: 700%;
	height: 310px;
font-size:0;
}

Modifié par aliasdmc (30 Nov 2019 - 15:59)
aliasdmc a écrit :
Bonjour Dayka,
Essaye cela : 
#slideshow-sw .slider-sw {
	position: absolute;
	left:0; top:0;
	width: 700%;
	height: 310px;
font-size:0;
}


Merci beaucoup ça marche ! Tu aurais une idée pour les suivants précédents play et pause qui ne fonctionnent pas ? (Peut-être une erreur de positionnement des divs ?)
Sujet clos
Aller à