Componenti Cursore carosello Componente del dispositivo di scorrimento del carosello

Componente del dispositivo di scorrimento del carosello

Un semplice componente di scorrimento del carosello progettato per l'e-commerce in modalità oscura utilizzando Tailwind CSS.

Anteprima

Codice 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>

Componenti correlati

Componente Glassmorphism Carousel Slider

Componente Carousel Slider con design Glassmorphism e supporto per la modalità scura.

Aperto

Componente del dispositivo di scorrimento del carosello

Un componente del dispositivo di scorrimento a carosello semplice e reattivo con estetica Material Design, toni seppia/marrone e supporto per la modalità scura, adatto per un portfolio. Non utilizza JavaScript, il che lo rende un componente puramente basato su CSS.

Aperto

Componente del dispositivo di scorrimento del carosello

Un componente di scorrimento a carosello semplice e reattivo progettato per applicazioni sportive/fitness con un'interfaccia utente in modalità scura, una combinazione di colori in bianco e nero e un colore d'accento brillante.

Aperto