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.
HTML Code
<div class="relative w-full h-64 overflow-hidden bg-gray-800" data-theme="dark">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<div class="absolute w-full h-full bg-gray-800 transition duration-300 ease-in-out transform scale-110 opacity-75"></div>
<div class="carousel-slide transition-all duration-500 ease-in-out transform space-x-4">
<div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1">
<p class="text-white mt-2">Slide 1</p>
</div>
<div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2">
<p class="text-white mt-2">Slide 2</p>
</div>
<div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3">
<p class="text-white mt-2">Slide 3</p>
</div>
<div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=4" alt="Carousel Image 4">
<p class="text-white mt-2">Slide 4</p>
</div>
</div>
</div>
<button class="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
❮
</button>
<button class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
❯
</button>
</div>
<style>
[data-theme="dark"] {
background-color: #1a202c;
}
</style>Composants associés
Composant de curseur de carrousel
Un composant de curseur de carrousel simple et réactif avec une typographie épurée, des tons sépia/bruns pour la documentation et les sites de base de connaissances. Inclut la prise en charge du mode sombre.
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.
Retro_Vintage_Agriculture_Carousel
Un composant de curseur de carrousel à thème rétro/vintage pour les sites Web agricoles, avec un design monochrome, une esthétique nostalgique des années 80/90 et une réactivité totale avec prise en charge du mode sombre.