Componentes Control deslizante de carrusel Componente Deslizador de carrusel

Componente Deslizador de carrusel

Un componente de deslizador de carrusel simple diseñado para el comercio electrónico en modo oscuro utilizando Tailwind CSS.

Vista previa

Código HTML

<div class="relative w-full max-w-lg mx-auto">
    <div class="overflow-hidden rounded-lg shadow-lg">
        <div class="carousel-inner dark:bg-gray-800 bg-gray-100">
            <div class="carousel-item active">
                <img src="https://picsum.photos/800/400?1" alt="Product 1" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 1</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 1</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?2" alt="Product 2" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 2</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 2</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?3" alt="Product 3" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 3</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 3</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
        </div>

        <!-- Carousel controls (optional) -->
        <button class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10094;
        </button>
        <button class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10095;
        </button>
    </div>
</div>

<style>
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}
</style>

Componentes relacionados

Deslizador de carrusel de alimentos Neon Glow

Un componente deslizante de carrusel complejo y receptivo con efectos de brillo de neón y una combinación de colores dulces/dulces, diseñado para sitios web de restaurantes y entrega de alimentos, incluida la compatibilidad con el modo oscuro.

Abrir

Skeuomorphic_Dating_Carousel

Un componente deslizante de carrusel simple y receptivo con elementos de diseño esqueuomórficos y un esquema de color análogo, adecuado para plataformas sociales o de citas. Incluye soporte para modo oscuro.

Abrir

Carrusel de moda otoñal juguetón

Un componente deslizante de carrusel lúdico y divertido para marcas de moda y belleza, con una estética alegre, elementos redondeados y una combinación de colores otoñales. Admite capacidad de respuesta y modo oscuro.

Abrir