Componente Deslizador de carrusel
Un componente deslizante de carrusel receptivo diseñado en un estilo brutalista utilizando Tailwind CSS, con alto contraste, diseños inusuales y soporte para temas oscuros.
Código HTML
<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>Componentes relacionados
Componente Deslizador de carrusel
Un componente deslizante de carrusel receptivo con soporte para modo oscuro. Este componente utiliza solo HTML y Tailwind CSS, sin JavaScript. Cuenta con un diseño simple con colores vibrantes para la diapositiva activa, adecuado para el blog o el consumo de contenido.
Componente deslizante de carrusel de glassmorphism
Componente de control deslizante de carrusel con diseño de morfismo de vidrio y soporte de modo oscuro.
Deslizador de carrusel de neumorfismo
Componente de deslizador de carrusel receptivo con estilo de neumorfismo, combinación de colores pastel, complejidad moderada, propósito de redes sociales y soporte de tema oscuro mediante Tailwind CSS.