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
Neon Glow Food Carrousel Slider
Un composant de curseur de carrousel complexe et réactif avec des effets de lueur néon et une palette de couleurs bonbons/sucrés, conçu pour les sites Web de livraison de nourriture et de restaurants, y compris la prise en charge du mode sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif avec des transitions de couleurs dégradées, conçu pour les marques de mode et de beauté. Prend en charge le mode sombre et offre un look élégant et moderne.
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.