18073 sujets

Questions générales et questions de débutants

Carrousel d'images avec vignettes

Bonjour,

Je veux créer ce que l'on voit partout.

Une image principale, des images alternatives en vignettes.

Quand on clique sur une vignette elle devient l'image principale.

Et la zone d'image principale peut fonctionner comme un diaporama avec boutons pour avancer dans un sens ou dans l'autre.

J'aimerais un code avec le minimum de JS possible.

Ce ne doit pas être trop compliqué mais autant s'inspirer de codes déjà existants.

Je crois savoir que cela a un nom, j'ai cherché Diaporama sur ce forum, ce n'est pas exactement ce que je cherche.

Un exemple simple, sans les boutons de défilement.

upload/1749489264-58253-2025-06-09190711-window.png

Si j'ai pour commencer j'ai le nom de ce truc cela peut m'aider (et je changerais le titre de la discussion).

Merci d'avance.
Modifié par boteha_2 (10 Jun 2025 - 11:51)
Bonjour Mathieuu,

Carrousel, merci pour le nom.

Je n'utilise pas boostrap, le code est fait à la main.

Je vais chercher.
Bonjour,

gcyrillus a écrit :
Voici un exemple basique pour 3 images (thumb + taille normale) avec :focus et un display en grid : https://codepen.io/gc-nomade/pen/WbvdLzG


Je me suis inspiré de ton code et j'ai quelques problèmes.

Première chose à laquelle je ne comprends rien, cela fonctionne avec :hover mais pas avec :focus.

Sans voir mon code, avez-vous une idée ?

Par ailleurs, quand les images sont en display: none, sont-elles quand même chargées (il me semble que oui) ?
Si oui cela m'ennuie un peu car il peut y avoir pas mal d'images et cela alourdit la page.
Dans ce cas je préférerais une solution JS si elle permet de ne charger qu'une seule fois les images.

Ou une transition pour déplacer la vignette dans la zone de l'image principale en changeant sa taille, et inversement placer l'image principale en vignette, est-ce une piste viable ?
Modifié par gcyrillus (22 Jun 2025 - 21:03)
Modérateur
boteha_2 a écrit :
Bonjour,

Première chose à laquelle je ne comprends rien, cela fonctionne avec :hover mais pas avec :focus.

Sans voir mon code, avez-vous une idée ?


Bonjour,

As tu disposé l'attribut tabindex sur les images à cliquer ?
cela évite
- de les mettre dans un lien
- de poser des id sur les images de grandes tailles.
- de faire sauté/scrollé la page à hauteur de l'image en :target
- de faire usage de js comme tu le souhaitais Smiley cligne

cdt

edit Voici un exemple en incluant une animation https://codepen.io/gc-nomade/pen/PwqxJGK
Modifié par gcyrillus (22 Jun 2025 - 21:14)
Bonjour,

gcyrillus a écrit :
As tu disposé l'attribut tabindex sur les images à cliquer ?


Ben non...
Effectivement il suffit d'ajouter un attribut tabindex pour que :focus fonctionne parfaitement.

Bon à savoir, merci beaucoup.

Je reviens plus tard avec d'autres questions.

PS : très sympa ton animation.
Mais je voulais dire une animation qui évite de devoir charger des images en display: none.
Modifié par boteha_2 (22 Jun 2025 - 23:09)
Bonjour gcyrillus,

Merci de ton suivi.

Dans le code html les images restent chargées en double : l'image et sa vignette.

Pas moyen de ne charger qu'une seule image ?

C'est juste une remarque, ce n'est pas en soi trop pénalisant de charger deux images.
gcyrillus a écrit :
l'attribut loading devrait faire l'affaire en rejetant l'image en dehors de l'écran par défaut avec le risque de perdre l'animation au premier chargement/affichage de l'image.


Très intéressant.
Prévenir un modérateur
Répondre au sujet
Aller à