Slider en HTML ET CSS
Résolu/Fermé
Denizay
Messages postés
105
Date d'inscription
mercredi 17 octobre 2012
Statut
Membre
Dernière intervention
21 novembre 2021
-
1 févr. 2016 à 19:07
Denizay Messages postés 105 Date d'inscription mercredi 17 octobre 2012 Statut Membre Dernière intervention 21 novembre 2021 - 5 févr. 2016 à 17:49
Denizay Messages postés 105 Date d'inscription mercredi 17 octobre 2012 Statut Membre Dernière intervention 21 novembre 2021 - 5 févr. 2016 à 17:49
A voir également:
- Slider automatique html css
- Message automatique thunderbird - Guide
- Editeur html - Télécharger - HTML
- Réponse automatique outlook - Guide
- Recherche automatique des chaînes ne fonctionne pas - Guide
- Sommaire automatique word - Guide
1 réponse
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
524
2 févr. 2016 à 12:39
2 févr. 2016 à 12:39
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
4 févr. 2016 à 20:16
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
5 févr. 2016 à 17:49
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.