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
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é.
A voir également:

1 réponse

Pitet
Messages postés
2784
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
19 mai 2022
527
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
0
Denizay
Messages postés
105
Date d'inscription
mercredi 17 octobre 2012
Statut
Membre
Dernière intervention
21 novembre 2021

4 févr. 2016 à 20:16
Salut,

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
0
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
Bonjour à tous ceux qui suivent ce sujet,

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.
0