Componente del dispositivo di scorrimento del carosello
Un componente di scorrimento a carosello reattivo progettato per le dashboard, con microinterazioni e colori vivaci con supporto per la modalità scura.
Codice HTML
<div class="relative w-full max-w-screen-lg mx-auto">
<div class="overflow-hidden">
<div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0);"><!-- Previous Transform: translateX(-100%) -->
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 1 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 1.</p>
</div>
</div>
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 2 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 2.</p>
</div>
</div>
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 3 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 3.</p>
</div>
</div>
</div>
</div>
<div class="absolute top-1/2 left-0 transform -translate-y-1/2">
<button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
❮
</button>
</div>
<div class="absolute top-1/2 right-0 transform -translate-y-1/2">
<button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
❯
</button>
</div>
<div class="flex justify-center mt-4 space-x-2">
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
</div>
</div>Componenti correlati
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.
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.
Componente del dispositivo di scorrimento del carosello
Un componente di scorrimento del carosello reattivo con supporto per la modalità scura. Questo componente utilizza solo HTML e Tailwind CSS, senza JavaScript. Presenta un layout semplice con colori vivaci per la diapositiva attiva, adatto per il consumo di blog o contenuti.