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.
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">
❮
</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">
❯
</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
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
Un componente di scorrimento del carosello reattivo per l'e-commerce con supporto per la modalità scura. Presenta immagini dei prodotti, nomi, prezzi e pulsanti di aggiunta al carrello. Il design utilizza una combinazione di colori complementari adatta alla modalità oscura, migliorando il comfort visivo e la presentazione del prodotto.
Componente del dispositivo di scorrimento del carosello
Un componente minimalista del cursore a carosello progettato per i blog e il consumo di contenuti, con combinazione di colori triadica e design reattivo con supporto per temi scuri.