Créer un slider d’images en utilisant uniquement HTML et CSS peut être un peu délicat car les sliders d’images sont généralement réalisés à l’aide de JavaScript. Cela étant dit, il est toujours possible de créer un slider basique en utilisant des keyframes et des animations CSS.
Voici comment vous pouvez le faire :
HTML :
```
.slide { width: 100%; height: 100%; position: absolute;
animation: slide 6s infinite; animation-timing-function: linear;}
#slide-1 {
background: url(‘image-1.jpg’);
animation-delay: 0s;
}
#slide-2 {
background: url(‘image-2.jpg’);
animation-delay: 2s;
}
#slide-3 {
background: url(‘image-3.jpg’);
animation-delay: 4s;
}
@keyframes slide {
0% { left: 100%; opacity: 0; }
20% { left: 0%; opacity: 1; }
40% { left: 0%; opacity: 1; }
60% { left: -100%; opacity: 0; }
100% { left: -100%; opacity: 0; }
}
```
Ceci créera un slider avec trois slides qui se déplacent de droite à gauche. Vous pouvez ajouter autant de slides que vous le souhaitez en ajoutant simplement plus de div.slide et en ajustant les délais d’animation et les pourcentages de keyframes.
