Componente Deslizador de carrusel
Un componente deslizante de carrusel receptivo para comercio electrónico con soporte para modo oscuro. Cuenta con imágenes de productos, nombres, precios y botones para agregar al carrito. El diseño utiliza una combinación de colores complementaria adecuada para el modo oscuro, lo que mejora la comodidad visual y la presentación del producto.
Código HTML
<div class="dark:bg-gray-900 bg-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold dark:text-white text-gray-900 mb-6">Featured Products</h2>
<div class="relative">
<div class="carousel-container relative overflow-hidden">
<div class="carousel-track flex transition-transform duration-500 ease-in-out">
<!-- Product Card 1 -->
<div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Stylish Headphones</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience immersive sound with these premium headphones.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$120.00</span>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Smartwatch Pro</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Stay connected and track your fitness with this advanced smartwatch.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$199.00</span>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Portable Bluetooth Speaker</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Enjoy your music anywhere with this powerful and compact speaker.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$75.00</span>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Ergonomic Office Chair</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Work in comfort and style with this adjustable office chair.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$250.00</span>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons (Optional - can be styled with Tailwind) -->
<button class="carousel-prev absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-2 rounded-full shadow-lg z-10">
❮
</button>
<button class="carousel-next absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-2 rounded-full shadow-lg z-10">
❯
</button>
</div>
</div>
</div>
<style>
.carousel-track {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
}
.carousel-item {
scroll-snap-align: start;
}
.carousel-container {
overflow-x: scroll;
scrollbar-width: none; /* Hide scrollbar for Firefox */
-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
.carousel-container::-webkit-scrollbar {
display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
</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.
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.
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.