Slider en HTML ET CSS
Résolu
Denizay
Messages postés
105
Date d'inscription
Statut
Membre
Dernière intervention
-
Denizay Messages postés 105 Date d'inscription Statut Membre Dernière intervention -
Denizay Messages postés 105 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je débute en HTML5 et CSS3 et j'ai pour but de créer mon propre site sur lequel je partage des photos. J'ai donc voulu coder un diaporama dans lequel les photos défilent automatiquement. J'ai pour cela, trouvé un site qui propose un code en html et css: https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Seulement j'ai une limite de 4 photos dans le diaporama. Je ne trouve pas dans quelle partie du code je doit effectuer une modification afin d'augmenter la possibilité de mettre plus de photos.
PS: le code CSS est précisé sur le site que j'ai indiqué.
Je débute en HTML5 et CSS3 et j'ai pour but de créer mon propre site sur lequel je partage des photos. J'ai donc voulu coder un diaporama dans lequel les photos défilent automatiquement. J'ai pour cela, trouvé un site qui propose un code en html et css: https://www.creativejuiz.fr/blog/tutoriels/css3-creer-slideshow-automatique-controlable-transition
Seulement j'ai une limite de 4 photos dans le diaporama. Je ne trouve pas dans quelle partie du code je doit effectuer une modification afin d'augmenter la possibilité de mettre plus de photos.
PS: le code CSS est précisé sur le site que j'ai indiqué.
A voir également:
- Exemple slider html
- Editeur html - Télécharger - HTML
- Br html ✓ - Forum Webmastering
- Html br ✓ - Forum Webmastering
- Balise </br> - Forum HTML
- Espace en html - Astuces et Solutions
1 réponse
Salut,
La réponse de l'auteur à ta question est dans les commentaires du tutoriel :
"La compréhension du code est primordiale. Les animations sont calculées en fonction du nombre d’image, ainsi que les dimensions du conteneur et le décalage en pixel des fonds lors des commandes manuelles sur le slideshow (les jeux de :target).
Comprendre ce code et chercher par vous même vous amènera à un plus haut niveau"
Si tu comprend le code du tuto, tu devrais donc comprendre comment ajouter des images.
L'idée est donc d'ajouter des balises figure, img et figcaption dans ton document html puis modifier le css en recalculant toutes les étapes et durées des animations.
Bonne journée
La réponse de l'auteur à ta question est dans les commentaires du tutoriel :
"La compréhension du code est primordiale. Les animations sont calculées en fonction du nombre d’image, ainsi que les dimensions du conteneur et le décalage en pixel des fonds lors des commandes manuelles sur le slideshow (les jeux de :target).
Comprendre ce code et chercher par vous même vous amènera à un plus haut niveau"
Si tu comprend le code du tuto, tu devrais donc comprendre comment ajouter des images.
L'idée est donc d'ajouter des balises figure, img et figcaption dans ton document html puis modifier le css en recalculant toutes les étapes et durées des animations.
Bonne journée
Merci beaucoup pour ta réponse, effectivement dans les commentaires j'avais lu plusieurs réponses du même type. Je cherche donc à comprendre le fonctionnement du code que je trouve très clair.
Du fait que je débute il y a beaucoup de fonctions que je ne comprend pas encore comme les @keyframes par exemple qui jouent un rôle dans la transition des images.
J'y suis presque avec quelques essaient !
Je ne manquerai pas de partager la modification à apporter pour ajouter plus d'images, ça pourrait servir à d'autres qui cherchent :)
Bonne soirée
après plusieurs recherches et essaient, j'ai trouvé la solution pour ajouter plus de 4 images dans ce "slidershow".
Pour cela, il faut tout d'abord modifier comme dit plus haut le code HTML, <figure> en ajoutant une 5ème image.
Ensuite, dans le code CSS, les parties que j'ai modifiées sont:
- @keyframes slider
(ici, j'ai modifié les pourcentages afin de faire en sorte que la transition accepte une image de plus)
@-webkit-keyframes slider {
0%, 5%, 100% { left: 0 }
10%, 30% { left: -100% }
35%, 50% { left: -200% }
55%, 70% { left: -300% }
75%, 95% { left: -400% }
}
- #slideshow .slider {
animation: slider "le temps définit" infinite;
}
(ici, j'ai modifié le temps en seconde du slide entier) n'hésiter pas à faire plusieurs essais afin de trouver le bon temps en synchronisation avec les "figcaptions"
- #slideshow .slider {
position: absolute;
left:0; top:0;
width: 500%;
height: 310px;
}
(ici, c'est le "width" que j'ai augmenté car le conteneur des slides en largeur fait 100% x le nombre de slides donc dans ce cas 5 slides, 500%).
Voilà, donc pour ma part en tant que débutante c'est la seule solution que j'ai trouvé si quelqu'un connaît une meilleure manière de faire qu'il n'hésite pas à partager! :)
Bonne soirée à tous.