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.



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)

Salut,

de ce que je comprends, tu veux faire un carrousel. Tu utilises boostrap ? Si oui c'est pré intégré : https://getbootstrap.com/docs/5.1/components/carousel/

Bonjour Mathieuu,

Carrousel, merci pour le nom.

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

Je vais chercher.

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

Hello gcyrillus,

Très intéressant ton codepen, merci beaucoup.