RetroCarrouselSlider
Un composant de curseur de carrousel simple, réactif et à thème rétro pour les sites Web d’entreprise, avec prise en charge du mode sombre et sans JavaScript.
HTML Code
<div class="relative w-full max-w-4xl mx-auto overflow-hidden rounded-lg shadow-lg">
<!-- Carousel Wrapper -->
<div class="relative h-96">
<!-- Slide 1 -->
<div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100" data-carousel-item>
<img src="https://picsum.photos/seed/retro1/1200/400" alt="Slide 1" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Innovation That Endures</h2>
</div>
</div>
<!-- Slide 2 -->
<div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
<img src="https://picsum.photos/seed/retro2/1200/400" alt="Slide 2" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Timeless Solutions for Tomorrow</h2>
</div>
</div>
<!-- Slide 3 -->
<div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
<img src="https://picsum.photos/seed/retro3/1200/400" alt="Slide 3" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Building on a Legacy of Quality</h2>
</div>
</div>
</div>
<!-- Carousel Navigation (Optional - for visual representation, actual prev/next usually needs JS) -->
<div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-2">
<button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
<button class="w-3 h-3 bg-gray-500 rounded-full dark:bg-gray-400"></button>
<button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
</div>
</div>
<style>
/* A very basic animation for demonstration, typically this would be handled by JS for a real carousel */
/* This CSS just cycles opacity for 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
Un composant de curseur de carrousel réactif conçu dans un style brutaliste à l’aide de Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles et la prise en charge des thèmes sombres.
Brutalism_News_Carousel
Un composant de curseur de carrousel simple, de style brutaliste, pour les sites d’actualités et de journalisme, avec un contraste élevé, des neutres froids et une réactivité totale avec prise en charge du mode sombre. Utilise des images fictives et met l’accent sur les éléments visuels bruts.