Componenti Cursore carosello Componente del dispositivo di scorrimento del carosello 28

Componente del dispositivo di scorrimento del carosello 28

Un componente minimalista del dispositivo di scorrimento del carosello con design reattivo e supporto per temi scuri.

Anteprima

Codice HTML

<div class="relative bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3" class="w-full h-auto" />
            </div>
        </div>
    </div>
    <div class="absolute inset-0 flex items-center justify-between p-4">
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10094;
        </button>
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10095;
        </button>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1F2937;
        }
        .hover\:bg-gray-600:hover {
            background-color: #4B5563;
        }
    }
</style>

Componenti correlati

Glassmorphism Carousel Slider

Un componente slider a carosello reattivo con stile glassmorphism, adatto per il consumo di blog e contenuti. Presenta più diapositive di contenuto, elementi simili al vetro smerigliato ed è progettato sia per temi chiari che scuri.

Aperto

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.

Aperto

Componente del dispositivo di scorrimento del carosello

Implementa un componente web Componente cursore a carosello con stile di design "Neumorfismo - Uno stile di interfaccia utente morbido che crea elementi che sembrano estrudere dallo sfondo utilizzando ombre sottili" utilizzando la combinazione di colori "Complementare - Colori uno di fronte all'altro sulla ruota dei colori" e il livello di complessità "Complesso - Interfaccia ricca con più elementi interattivi", per lo scopo "Portfolio - Per mostrare lavori o prodotti" utilizzando Tailwind CSS. Crea un design reattivo con il supporto del tema scuro. Non è necessario alcun codice JavaScript, solo HTML con classi Tailwind. Per la modalità scura, usa il prefisso dark: di Tailwind per lo styling. Se sono necessarie immagini, usa picsum.photos per le immagini e randomuser.me per gli avatar.

Aperto