HTML, CSS et JavaScript d’un carrousel
| Partie | Rôle | Symptôme si elle manque |
|---|---|---|
| CSS du plugin. | Disposition et styles nécessaires. | Les diapositives peuvent s’empiler. |
| JavaScript du plugin. | Création du comportement. | Le constructeur n’est pas disponible. |
| Structure HTML. | Éléments attendus par le plugin. | Les contrôles ou diapositives ne sont pas trouvés. |
Le cours utilise une copie locale de Swiper 11.2.10. Le projet doit utiliser des fichiers de cette même version ou une installation clairement documentée. Changer seulement le JavaScript sans vérifier le CSS et les options peut rendre l’exemple incohérent.
Chargement du DOM et initialisation de Swiper
Le constructeur reçoit un sélecteur ou un élément ainsi qu’un objet d’options. La structure doit exister lors de cette initialisation. Si une page possède deux carrousels, des sélecteurs trop généraux peuvent relier les boutons du premier au second. Donnez un contexte précis à chaque instance.
slidesPerView décrit combien de diapositives sont visibles ; l’espace entre elles relève d’une autre option. Les boutons précédent/suivant, les indicateurs et les conditions de largeur ont des rôles distincts. Activez les fonctionnalités nécessaires, puis vérifiez leur effet au lieu d’accumuler toutes les options disponibles.
Clavier, navigation et mouvement du carrousel
Une lecture automatique n’est pas obligatoire. Un carrousel dont le contenu change trop vite peut gêner la lecture ; la version de base utilise des commandes explicites. Les boutons doivent posséder un nom compréhensible et rester atteignables au clavier. Les images ont toujours besoin d’alternatives adaptées.
Testez la première diapositive, la dernière et la largeur étroite. Le contenu doit rester utilisable sans dépendre d’un geste tactile. Une bibliothèque n’exonère pas de vérifier les états et les parcours du composant final.
La configuration du carrousel Swiper
Un plugin apporte une fonctionnalité et une API de configuration. Vous restez responsable des contenus, du clavier et des ressources. Le carrousel utilise ici Swiper 11.2.10, fourni localement avec sa licence. La version est fixée pour garder l’exemple reproductible ; les URL CDN d’un autre tutoriel peuvent fournir une API différente.
<div class="swiper" aria-label="Sélection de projets">
<div class="swiper-wrapper">
<article class="swiper-slide">Premier projet</article>
<article class="swiper-slide">Deuxième projet</article>
</div>
<button class="swiper-button-prev" aria-label="Projet précédent"></button>
<button class="swiper-button-next" aria-label="Projet suivant"></button>
<div class="swiper-pagination"></div>
</div>const carrousel = new Swiper('.swiper', {
slidesPerView: 1,
spaceBetween: 16,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
pagination: { el: '.swiper-pagination', clickable: true },
keyboard: { enabled: true, onlyInViewport: true },
a11y: { enabled: true }
});Lecture : chargez d’abord CSS et script de la bibliothèque, puis initialisez après le HTML. slidesPerView décrit combien de diapositives sont affichées ; spaceBetween règle leur espacement. Les sélecteurs de navigation doivent viser les boutons de cet exemple, pas une autre galerie.
Configurer et manipuler un vrai carrousel Swiper
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20px;
font-family: system-ui, sans-serif;
color: #18324c;
background: #f1f5f9;
}
button,
input,
select,
textarea {
font: inherit;
max-width: 100%;
}
button {
padding: 8px 12px;
cursor: pointer;
}
input,
select,
textarea {
padding: 8px;
}
:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}
article,
.panel {
padding: 16px;
background: white;
border-radius: 12px;
min-width: 0;
}
.cards {
display: grid;
gap: 16px;
}
label {
display: block;
margin-block: 12px 4px;
}
h1 {
font-size: 1.4rem;
}
h2 {
font-size: 1.15rem;
}
p,
h2,
a {
overflow-wrap: anywhere;
}
.note {
font-size: 0.9rem;
}
.swiper {
width: 100%;
padding-bottom: 35px;
}
.swiper-slide {
min-height: 130px;
}
.swiper:not(.swiper-initialized) .swiper-wrapper {
display: block;
}
.swiper:not(.swiper-initialized) .swiper-slide {
margin-bottom: 12px;
}
</style>
<link rel="stylesheet" href="/vendor/swiper/swiper-bundle.min.css" />
<h1>Carrousel sans défilement automatique</h1>
<div class="swiper">
<div class="swiper-wrapper">
<article class="swiper-slide">
<h2>Photo</h2>
<p>Explorer l’image.</p>
</article>
<article class="swiper-slide">
<h2>Musique</h2>
<p>Composer une rencontre.</p>
</article>
<article class="swiper-slide">
<h2>Sport</h2>
<p>Préparer un tournoi.</p>
</article>
</div>
<div class="swiper-pagination"></div>
</div>
<button class="precedent" aria-label="Diapositive précédente">
Précédent
</button>
<button class="suivant" aria-label="Diapositive suivante">Suivant</button>
<p class="note">
Bibliothèque Swiper 11.2.10 locale, licence MIT. Sans JS, les trois
contenus restent visibles.
</p>
<script src="/vendor/swiper/swiper-bundle.min.js"></script>
<script>
// Wait for the iframe's first layout: its width can be zero during parsing.
if (typeof Swiper !== "undefined")
requestAnimationFrame(() => {
window.carrousel = new Swiper(".swiper", {
slidesPerView: 1,
spaceBetween: 16,
navigation: { nextEl: ".suivant", prevEl: ".precedent" },
pagination: { el: ".swiper-pagination", clickable: true },
keyboard: { enabled: true, onlyInViewport: true },
a11y: {
enabled: true,
prevSlideMessage: "Diapositive précédente",
nextSlideMessage: "Diapositive suivante",
},
});
});
</script>