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.
Código HTML
<section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
<div class="flex flex-col items-center justify-center max-w-screen-lg">
<div class="flex items-center justify-center w-full h-auto">
<div class="w-full h-full carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<label for="carousel-3" class="carousel-control prev control-1">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-2" class="carousel-control next control-1">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
<label for="carousel-1" class="carousel-control prev control-2">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-3" class="carousel-control next control-2">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
<label for="carousel-2" class="carousel-control prev control-3">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-1" class="carousel-control next control-3">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
</div>
</div>
</div>
</div>
<style>
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
visibility: hidden;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.carousel-open:checked ~ .carousel-item:not(.carousel-item) {
opacity: 0;
}
.carousel-open:checked ~ .control-1,
.carousel-open:checked ~ .control-2,
.carousel-open:checked ~ .control-3 {
display: flex;
}
.carousel-control {
z-index: 1;
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
width: 10%;
cursor: pointer;
opacity: 50%;
transition: opacity 150ms ease-in-out;
}
.carousel-control:hover {
opacity: 100%;
}
.control-1,
.control-2,
.control-3 {
width: 5vh;
height: 5vh;
border-radius: 50%;
position: absolute;
}
.control-1 {
top: 45%;
left: 5%;
}
.control-2 {
top: 45%;
right: 5%;
}
.control-3 {
top: 45%;
left: 5%;
}
</style>
</section>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.
RetroCarruselControl deslizante
Un componente deslizante de carrusel simple, receptivo y de temática retro para sitios web comerciales, con soporte para modo oscuro y sin JavaScript.
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.