Slider animation Keyframe

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

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

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.

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

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.

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

aliasdmc a écrit :
Bonjour Dayka,
Tu as un moyen de faire un codepen ?

#slideshow-sw .slider-sw {
	position: absolute;
	left:0; top:0;
	width: 700%;
	height: 310px;
font-size:0;
}

aliasdmc a écrit :
Bonjour Dayka,
Essaye cela :

#slideshow-sw .slider-sw {
	position: absolute;
	left:0; top:0;
	width: 700%;
	height: 310px;
font-size:0;
}