Componenti Cursore carosello Componente del dispositivo di scorrimento del carosello

Componente del dispositivo di scorrimento del carosello

Un componente di scorrimento del carosello reattivo progettato in stile brutalismo utilizzando Tailwind CSS, con contrasto elevato, layout insoliti e supporto per temi scuri.

Anteprima

Codice HTML

<div class="relative w-full h-64 overflow-hidden bg-gray-800" data-theme="dark">
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="absolute w-full h-full bg-gray-800 transition duration-300 ease-in-out transform scale-110 opacity-75"></div>
        <div class="carousel-slide transition-all duration-500 ease-in-out transform space-x-4">
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1">
                <p class="text-white mt-2">Slide 1</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2">
                <p class="text-white mt-2">Slide 2</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3">
                <p class="text-white mt-2">Slide 3</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=4" alt="Carousel Image 4">
                <p class="text-white mt-2">Slide 4</p>
            </div>
        </div>
    </div>
    <button class="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❮
    </button>
    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❯
    </button>
</div>
<style>
    [data-theme="dark"] {
        background-color: #1a202c;
    }
</style>

Componenti correlati

Componente del dispositivo di scorrimento del carosello monospazio

Un componente di scorrimento a carosello semplice, pulito e ispirato al monospazio per la visualizzazione di blog/contenuti, progettato con una combinazione di colori analoga e una reattività completa, inclusa la modalità scura.

Aperto

Neumorfismo E-commerce Cursore a carosello

Un componente di scorrimento del carosello neumorfico reattivo con supporto per temi scuri per l'e-commerce, utilizzando Tailwind CSS. Presenta una combinazione di colori complementari. Non viene utilizzato alcun JavaScript.

Aperto

Playful_Forest_Agriculture_Carousel

Un componente di scorrimento a carosello giocoso e divertente progettato per l'agricoltura e i siti Web di allevamento, con una tavolozza di colori foresta/verde, elementi arrotondati e reattività completa con supporto per la modalità oscura.

Aperto