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
Curseur de carrousel Composant 28
Un composant de curseur de carrousel minimaliste doté d’un design réactif et d’une prise en charge du thème sombre.
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 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.