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
Un composant de curseur de carrousel minimaliste conçu pour les blogs et la consommation de contenu, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel simple et réactif avec l’esthétique de Material Design, les tons sépia/brun et la prise en charge du mode sombre, adapté à un portfolio. N’utilise pas de JavaScript, ce qui en fait un composant purement basé sur CSS.
Composant de curseur de carrousel monospace
Un composant de curseur de carrousel simple, propre, inspiré du monospace, pour l’affichage de blogs/contenus, conçu avec une palette de couleurs analogue et une réactivité totale, y compris le mode sombre.