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 simple y receptivo con estética de Material Design, tonos sepia/marrón y soporte para modo oscuro, adecuado para un portafolio. No utiliza JavaScript, por lo que es un componente puramente basado en CSS.
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.
Componente Deslizador de carrusel
Un componente de deslizador de carrusel simple diseñado para el comercio electrónico en modo oscuro utilizando Tailwind CSS.