Carousel React : créer un slider Tailwind gratuit en 2026
Découvrez comment créer un carousel React performant avec Tailwind CSS grâce aux composants gratuits d'Empire UI, sans dépendances lourdes.
Pourquoi le carousel reste incontournable en 2026
Le carousel React est l'un des composants d'interface les plus demandés dans le développement web moderne. Que ce soit pour un portfolio, une boutique en ligne ou une landing page SaaS, un slider bien conçu capte l'attention et guide le regard de l'utilisateur vers les éléments clés de votre contenu.
En 2026, les attentes ont évolué : un carousel doit être fluide, accessible (navigation au clavier, attributs ARIA), responsive sur mobile, et surtout léger. Les bibliothèques tierce-parties qui pèsent 50 Ko rien que pour un slider appartiennent au passé. Avec React et Tailwind CSS, il est tout à fait possible de construire un composant de qualité professionnelle en quelques dizaines de lignes.
Empire UI propose justement des composants gratuits pensés pour s'intégrer sans friction dans n'importe quel projet Next.js ou Vite, avec le support natif de Tailwind CSS v4. Explorons ensemble comment assembler un carousel React from scratch, puis comment exploiter les composants prêts à l'emploi d'Empire UI pour aller encore plus vite.
Les bases : structure d'un carousel React avec Tailwind
Un carousel se résume à trois éléments : un conteneur à débordement masqué (overflow-hidden), une piste de diapositives (flex qui se translate horizontalement), et des contrôles (boutons précédent/suivant, indicateurs de pagination). Le tout est piloté par un état React simple.
Voici une implémentation minimale et fonctionnelle :
``tsx
import { useState } from 'react';
const slides = [
{ id: 1, title: 'Slide 1', bg: 'bg-violet-600' },
{ id: 2, title: 'Slide 2', bg: 'bg-sky-500' },
{ id: 3, title: 'Slide 3', bg: 'bg-emerald-500' },
];
export function BasicCarousel() {
const [current, setCurrent] = useState(0);
const prev = () =>
setCurrent((c) => (c === 0 ? slides.length - 1 : c - 1));
const next = () =>
setCurrent((c) => (c === slides.length - 1 ? 0 : c + 1));
return (
<div className="relative w-full overflow-hidden rounded-2xl">
{/* Piste */}
<div
className="flex transition-transform duration-500 ease-in-out"
style={{ transform: translateX(-${current * 100}%) }}
>
{slides.map((s) => (
<div
key={s.id}
className={min-w-full h-64 flex items-center justify-center text-white text-3xl font-bold ${s.bg}}
>
{s.title}
</div>
))}
</div>
{/* Contrôles */}
<button
onClick={prev}
aria-label="Précédent"
className="absolute left-3 top-1/2 -translate-y-1/2 bg-white/20 backdrop-blur-sm text-white rounded-full p-2 hover:bg-white/40 transition"
>
‹
</button>
<button
onClick={next}
aria-label="Suivant"
className="absolute right-3 top-1/2 -translate-y-1/2 bg-white/20 backdrop-blur-sm text-white rounded-full p-2 hover:bg-white/40 transition"
>
›
</button>
{/* Indicateurs */}
<div className="absolute bottom-3 left-1/2 -translate-x-1/2 flex gap-2">
{slides.map((_, i) => (
<button
key={i}
onClick={() => setCurrent(i)}
className={w-2.5 h-2.5 rounded-full transition ${
i === current ? 'bg-white' : 'bg-white/40'
}}
/>
))}
</div>
</div>
);
}
``
Ce code ne dépend d'aucune bibliothèque externe au-delà de React et Tailwind CSS. La transition CSS transition-transform duration-500 assure une animation douce. La boucle circulaire (c === 0 ? slides.length - 1 : c - 1) évite de se retrouver bloqué en bout de liste. Notez l'utilisation de backdrop-blur-sm pour les boutons — une touche de glassmorphism qui rend le résultat visuellement élégant sans effort.
Ajouter le défilement automatique et le support tactile
Un carousel de production doit supporter le swipe mobile et proposer une option de lecture automatique (autoplay). Ces deux fonctionnalités s'ajoutent proprement avec useEffect, useRef et les événements tactiles natifs de React.
Pour l'autoplay, un setInterval dans un useEffect suffit. La clé est de nettoyer l'intervalle lors du démontage et de le mettre en pause quand l'utilisateur interagit manuellement :
``tsx
useEffect(() => {
if (!autoplay) return;
const id = setInterval(next, interval);
return () => clearInterval(id);
}, [current, autoplay, interval]);
`
Pour le swipe, on enregistre la position touchstart et on compare avec touchend. Si le delta dépasse un seuil (généralement 50 px), on avance ou recule :
`tsx
const touchStart = useRef(0);
<div
onTouchStart={(e) => (touchStart.current = e.touches[0].clientX)}
onTouchEnd={(e) => {
const delta = touchStart.current - e.changedTouches[0].clientX;
if (delta > 50) next();
else if (delta < -50) prev();
}}
>
``
Ces ajouts rendent le composant production-ready sans alourdir le bundle. Vous pouvez également explorer les templates par industrie d'Empire UI qui intègrent déjà ces patterns dans des mises en page complètes — hero sections, galleries de produits, témoignages clients —, ce qui vous évite de repartir de zéro à chaque projet.
Carousel React avec style : glassmorphism, neobrutalism et plus
L'un des grands atouts d'Empire UI est son système de styles visuels : 40 thèmes disponibles, du glassmorphism sophistiqué au neobrutalism coloré, en passant par le claymorphism doux et l'aesthetic Y2K rétro. Appliquer l'un de ces styles à votre carousel ne demande que quelques classes Tailwind supplémentaires.
Pour un carousel glassmorphism, remplacez le fond plein par un fond semi-transparent avec flou :
``tsx
// Conteneur glassmorphism
<div className="bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl shadow-xl">
{/* ... */}
</div>
`
Pour un carousel **neobrutalism**, misez sur les bordures épaisses, les ombres décalées et les couleurs saturées :
`tsx
// Conteneur neobrutalism
<div className="border-4 border-black shadow-[6px_6px_0px_#000] rounded-none bg-yellow-300">
{/* ... */}
</div>
``
Ces variations de style s'obtiennent sans changer la logique du composant — seules les classes Tailwind changent. C'est la philosophie d'Empire UI : séparer le comportement du rendu visuel. Parcourez la galerie des styles pour vous inspirer, ou utilisez notre serveur MCP pour générer automatiquement le code d'un carousel dans le style de votre choix, directement depuis votre éditeur.
Vous pouvez même combiner le carousel avec d'autres composants Empire UI comme un curseur personnalisé pour une expérience immersive, ou des onglets animés pour organiser le contenu adjacent. L'ensemble des composants partage la même API de tokens CSS, garantissant une cohérence visuelle sans effort.
Accessibilité et performances : les points clés à ne pas négliger
Un carousel accessible respecte plusieurs critères WCAG 2.2 : navigation au clavier (Tab, ArrowLeft, ArrowRight), rôle ARIA role="region" avec un aria-label, chaque diapositive marquée aria-hidden quand elle est hors-champ, et des boutons avec des libellés descriptifs (aria-label="Afficher la diapositive suivante").
Du côté des performances, le principal écueil est le Cumulative Layout Shift (CLS). Pour l'éviter, réservez l'espace vertical du carousel avec une hauteur fixe ou un ratio d'aspect (aspect-video, aspect-square) avant que les images ne se chargent. Utilisez également l'attribut loading="lazy" sur les images hors-écran, et le composant <Image> de Next.js qui gère automatiquement les formats modernes (WebP, AVIF).
Enfin, si votre carousel affiche beaucoup de diapositives, envisagez la virtualisation : ne rendre dans le DOM que la diapositive active et ses deux voisines immédiates. Cela réduit dramatiquement la charge initiale sur les appareils bas de gamme. Le blog Empire UI couvre régulièrement ces patterns avancés — consultez la section blog pour les derniers articles sur l'optimisation des composants React.
Aller plus loin avec Empire UI
Empire UI met à votre disposition l'ensemble de ces composants en accès libre et gratuit, sans inscription ni watermark. Chaque composant est livré avec son code source TypeScript, ses variantes de style, et sa documentation inline. Le carousel React ne fait pas exception : copiez le code, adaptez les tokens de couleur à votre charte graphique, et vous êtes prêt.
Pour les équipes qui souhaitent aller encore plus vite, le serveur MCP d'Empire UI permet de générer des composants directement depuis Claude, Cursor ou tout client compatible MCP. Dites simplement « génère un carousel glassmorphism avec autoplay pour une galerie de produits » et obtenez le code complet en quelques secondes. En savoir plus sur notre MCP.
N'oubliez pas d'explorer les templates d'industrie — plusieurs d'entre eux incluent des carousels préconfigurés pour l'e-commerce, le SaaS, ou les portfolios créatifs. C'est le moyen le plus rapide de passer d'une idée à une interface fonctionnelle, avec un rendu professionnel dès le premier commit.
FAQ
La meilleure approche est souvent de construire votre carousel avec React pur et Tailwind CSS pour éviter les dépendances inutiles. Empire UI propose des composants carousel gratuits, prêts à l'emploi et hautement personnalisables, sans bibliothèque tierce-partie.
Ajoutez les attributs ARIA appropriés (role="region", aria-label, aria-hidden sur les slides inactives) et gérez les événements onKeyDown pour les touches fléchées. Chaque bouton de contrôle doit posséder un aria-label descriptif pour les lecteurs d'écran.
Réservez l'espace vertical avant le chargement en utilisant une hauteur fixe ou un ratio d'aspect Tailwind (aspect-video). Sur Next.js, utilisez le composant <Image> avec width et height définis pour que le navigateur réserve l'espace avant le rendu.
Oui, entièrement. La transition du slider s'obtient avec les classes utilitaires transition-transform, duration-500 et ease-in-out. Le style des boutons, indicateurs et conteneurs peut également être entièrement exprimé en classes Tailwind standard.
Utilisez useEffect avec setInterval pour avancer automatiquement à l'intervalle souhaité. Pensez à nettoyer l'intervalle dans la fonction de retour de l'effet et à le réinitialiser lorsque l'utilisateur navigue manuellement pour éviter les sauts inattendus.