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.
Codice HTML
<div class="relative w-full max-w-4xl mx-auto mt-10">
<div class="flex overflow-hidden rounded-lg shadow-lg">
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Slide 1">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 1</div>
</div>
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Slide 2">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 2</div>
</div>
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Slide 3">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 3</div>
</div>
</div>
<div class="flex justify-center mt-4">
<button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Previous</button>
<button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Next</button>
</div>
<div class="mt-4 flex justify-around">
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
<p class="text-center text-white mt-2">Author 1</p>
</div>
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2">
<p class="text-center text-white mt-2">Author 2</p>
</div>
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 3">
<p class="text-center text-white mt-2">Author 3</p>
</div>
</div>
</div>Componenti correlati
Componente del dispositivo di scorrimento del carosello
Un componente di scorrimento a carosello reattivo con microinterazioni e supporto per temi scuri.
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.
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.