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 de deslizador de carrusel complejo y receptivo para sitios web de noticias/periodismo, con una interfaz de usuario de modo oscuro con un esquema de color en escala de grises. Muestra artículos de noticias con imágenes, títulos, descripciones y categorías, y está diseñado para reducir la fatiga visual.
Componente Deslizador de carrusel
Un componente deslizante de carrusel complejo de estilo retro / vintage para plataformas educativas, con colores apagados, diseño profesional y capacidad de respuesta total con soporte para modo oscuro. Diseñado para entornos corporativos/profesionales.
Componente Deslizador de carrusel
Un componente deslizante de carrusel simple y receptivo con tipografía limpia, tonos sepia/marrón para sitios de documentación y base de conocimientos. Incluye soporte para modo oscuro.