RetroCarouselSlider
Un componente di scorrimento a carosello semplice, reattivo e a tema retrò per siti Web aziendali, con supporto per la modalità oscura e senza JavaScript.
Codice HTML
<div class="relative w-full max-w-4xl mx-auto overflow-hidden rounded-lg shadow-lg">
<!-- Carousel Wrapper -->
<div class="relative h-96">
<!-- Slide 1 -->
<div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100" data-carousel-item>
<img src="https://picsum.photos/seed/retro1/1200/400" alt="Slide 1" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Innovation That Endures</h2>
</div>
</div>
<!-- Slide 2 -->
<div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
<img src="https://picsum.photos/seed/retro2/1200/400" alt="Slide 2" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Timeless Solutions for Tomorrow</h2>
</div>
</div>
<!-- Slide 3 -->
<div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
<img src="https://picsum.photos/seed/retro3/1200/400" alt="Slide 3" class="object-cover w-full h-full">
<div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
<h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Building on a Legacy of Quality</h2>
</div>
</div>
</div>
<!-- Carousel Navigation (Optional - for visual representation, actual prev/next usually needs JS) -->
<div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-2">
<button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
<button class="w-3 h-3 bg-gray-500 rounded-full dark:bg-gray-400"></button>
<button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
</div>
</div>
<style>
/* A very basic animation for demonstration, typically this would be handled by JS for a real carousel */
/* This CSS just cycles opacity for 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.
Componente del dispositivo di scorrimento del carosello
Un componente di scorrimento a carosello semplice e reattivo progettato per applicazioni sportive/fitness con un'interfaccia utente in modalità scura, una combinazione di colori in bianco e nero e un colore d'accento brillante.
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.