Componente deslizante de carrusel de glassmorphism
Componente de control deslizante de carrusel con diseño de morfismo de vidrio y soporte de modo oscuro.
Código HTML
<div class="relative w-full" data-carousel="static">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/seed/image1/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 1 Title</h2>
</div>
</div>
<!-- Item 2 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item="active">
<img src="https://picsum.photos/seed/image2/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 2 Title</h2>
</div>
</div>
<!-- Item 3 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/seed/image3/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 3 Title</h2>
</div>
</div>
<!-- Item 4 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/seed/image4/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 4 Title</h2>
</div>
</div>
<!-- Item 5 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/seed/image5/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 5 Title</h2>
</div>
</div>
</div>
<!-- Slider indicators -->
<div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
<button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></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" data-carousel-prev>
<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" data-carousel-next>
<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 9l4-4-4-4"/>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>Componentes relacionados
Componente del control deslizante de carrusel de modo oscuro
Componente de control deslizante de carrusel de modo oscuro con efectos responsivos y soporte de tema oscuro mediante Tailwind CSS.
Neumorfismo Control deslizante de carrusel de comercio electrónico
Un componente deslizante de carrusel neumórfico receptivo con soporte de tema oscuro para comercio electrónico, utilizando Tailwind CSS. Cuenta con una combinación de colores complementaria. No se utiliza JavaScript.
Componente Deslizador de carrusel
Implemente un componente web Carousel Slider Component con estilo de diseño "Neumorfismo - Un estilo de interfaz de usuario suave que crea elementos que parecen extruirse desde el fondo usando sombras sutiles" usando el esquema de color "Complementario - Colores opuestos entre sí en la rueda de colores" y el nivel de complejidad "Complejo - Interfaz rica con múltiples elementos interactivos", para el propósito "Portafolio - Para mostrar trabajos o productos" usando Tailwind CSS. Crea un diseño responsivo con soporte para temas oscuros. No se necesita código JavaScript, solo HTML con clases Tailwind. Para el modo oscuro, usa el prefijo dark: de Tailwind para el estilo. Si se necesitan imágenes, use picsum.photos para las imágenes y randomuser.me para los avatares.