Composant de curseur de carrousel
Un composant de curseur de carrousel réactif avec prise en charge du mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript. Il présente une mise en page simple avec des couleurs vives pour la diapositive active, adaptée au blog ou à la consommation de contenu.
HTML Code
<div class="relative w-full max-w-3xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden">
<!-- Carousel wrapper -->
<div class="relative h-64 md:h-80 lg:h-96 overflow-hidden rounded-lg">
<!-- Item 1 -->
<div id="carousel-item-1" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0">
<img src="https://picsum.photos/seed/1/800/400" class="block w-full h-full object-cover" alt="...">
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
<h3 class="text-xl md:text-2xl font-bold">Simple Dark Mode Carousel</h3>
<p class="text-sm md:text-base">A clean and vibrant carousel for your blog.</p>
</div>
</div>
<!-- Item 2 -->
<div id="carousel-item-2" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
<img src="https://picsum.photos/seed/2/800/400" class="block w-full h-full object-cover" alt="...">
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
<h3 class="text-xl md:text-2xl font-bold">Engaging Content Display</h3>
<p class="text-sm md:text-base">Showcase your articles with vibrant highlights.</p>
</div>
</div>
<!-- Item 3 -->
<div id="carousel-item-3" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
<img src="https://picsum.photos/seed/3/800/400" class="block w-full h-full object-cover" alt="...">
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
<h3 class="text-xl md:text-2xl font-bold">Responsive Across Devices</h3>
<p class="text-sm md:text-base">Looks great on desktop, tablet, and mobile.</p>
</div>
</div>
</div>
<!-- Slider indicators (Dots) -->
<div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2 rtl:space-x-reverse">
<button type="button" class="w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-600" aria-current="true" aria-label="Slide 1"></button>
<button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 2"></button>
<button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 3"></button>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>Composants associés
Composant de curseur de carrousel
Implémentez un composant Web Carrousel Slider Component avec le style de conception « Neumorphisme - Un style d’interface utilisateur doux qui crée des éléments semblant extruder de l’arrière-plan à l’aide d’ombres subtiles » en utilisant le schéma de couleurs « Complémentaire - Couleurs opposées les unes aux autres sur la roue chromatique » et le niveau de complexité « Complexe - Interface riche avec plusieurs éléments interactifs », à l’objectif « Portfolio - Pour présenter le travail ou les produits » à l’aide de Tailwind CSS. Créez un design réactif avec la prise en charge du thème sombre. Aucun code JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Si vous avez besoin d’images, utilisez picsum.photos pour les images et randomuser.me pour les avatars.
3D_Vibrant_Simple_Social_Carousel
Un composant de curseur de carrousel simple, dynamique et réactif inspiré de la 3D pour les interfaces de médias sociaux, avec prise en charge du mode sombre.
Retro_Vintage_Sunset_Carousel_Slider_Component
Un composant de curseur de carrousel complexe et réactif avec une esthétique rétro/vintage, une palette de couleurs chaudes de coucher de soleil, conçu pour les cas d’utilisation du tableau de bord. Comprend des flèches de navigation, des points et la prise en charge du mode sombre.