Composant de curseur de carrousel
Un composant de curseur de carrousel réactif conçu pour les tableaux de bord, avec des micro-interactions et des couleurs vives avec prise en charge du mode sombre.
HTML Code
<div class="relative w-full max-w-screen-lg mx-auto">
<div class="overflow-hidden">
<div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0);"><!-- Previous Transform: translateX(-100%) -->
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 1 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 1.</p>
</div>
</div>
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 2 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 2.</p>
</div>
</div>
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 3 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 3.</p>
</div>
</div>
</div>
</div>
<div class="absolute top-1/2 left-0 transform -translate-y-1/2">
<button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
❮
</button>
</div>
<div class="absolute top-1/2 right-0 transform -translate-y-1/2">
<button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
❯
</button>
</div>
<div class="flex justify-center mt-4 space-x-2">
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
</div>
</div>Composants associés
Composant de curseur de carrousel de brutalisme
Curseur de carrousel Brutalism avec CSS Tailwind, réactivité et mode sombre. Comprend des boutons de navigation et utilise des images de repère d’emplacement.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif pour le commerce électronique avec prise en charge du mode sombre. Il présente des images de produits, des noms, des prix et des boutons d’ajout au panier. Le design utilise une palette de couleurs complémentaires adaptée au mode sombre, améliorant le confort visuel et la présentation du produit.
Glassmorphism Carrousel Slider
Un composant de curseur de carrousel réactif avec un style glassmorphism, adapté à la consommation de blog et de contenu. Il comporte plusieurs diapositives de contenu, des éléments en verre dépoli et est conçu pour les thèmes clairs et sombres.