Karussell-Slider-Komponente
Eine reaktionsschnelle Karussell-Slider-Komponente mit Unterstützung für den Dunkelmodus. Diese Komponente verwendet nur HTML und Tailwind CSS ohne JavaScript. Es verfügt über ein einfaches Layout mit lebendigen Farben für die aktive Folie, das sich für den Konsum von Blogs oder Inhalten eignet.
HTML-Code
<div class="relative w-full max-w-3xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden">
<!-- Carousel wrapper -->
<div class="relative h-64 md:h-80 lg:h-96 overflow-hidden rounded-lg">
<!-- Item 1 -->
<div id="carousel-item-1" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-0">
<img src="https://picsum.photos/seed/1/800/400" class="block w-full h-full object-cover" alt="...">
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
<h3 class="text-xl md:text-2xl font-bold">Simple Dark Mode Carousel</h3>
<p class="text-sm md:text-base">A clean and vibrant carousel for your blog.</p>
</div>
</div>
<!-- Item 2 -->
<div id="carousel-item-2" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
<img src="https://picsum.photos/seed/2/800/400" class="block w-full h-full object-cover" alt="...">
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
<h3 class="text-xl md:text-2xl font-bold">Engaging Content Display</h3>
<p class="text-sm md:text-base">Showcase your articles with vibrant highlights.</p>
</div>
</div>
<!-- Item 3 -->
<div id="carousel-item-3" class="duration-700 ease-in-out absolute inset-0 transition-all transform translate-x-full">
<img src="https://picsum.photos/seed/3/800/400" class="block w-full h-full object-cover" alt="...">
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black to-transparent p-4 text-white">
<h3 class="text-xl md:text-2xl font-bold">Responsive Across Devices</h3>
<p class="text-sm md:text-base">Looks great on desktop, tablet, and mobile.</p>
</div>
</div>
</div>
<!-- Slider indicators (Dots) -->
<div class="absolute z-30 flex space-x-3 -translate-x-1/2 bottom-5 left-1/2 rtl:space-x-reverse">
<button type="button" class="w-3 h-3 rounded-full bg-indigo-500 dark:bg-indigo-600" aria-current="true" aria-label="Slide 1"></button>
<button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 2"></button>
<button type="button" class="w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-700" aria-current="false" aria-label="Slide 3"></button>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none">
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>Verwandte Komponenten
Monospace Carousel Slider-Komponente
Eine einfache, saubere, vom Monospace inspirierte Karussell-Slider-Komponente für die Anzeige von Blogs/Inhalten, die mit einem analogen Farbschema und voller Reaktionsfähigkeit, einschließlich Dunkelmodus, gestaltet ist.
Karussell-Slider-Komponente
Eine reaktionsschnelle Karussell-Slider-Komponente mit Mikrointeraktionen und Unterstützung für dunkle Themen.
Karussell-Slider-Komponente
Implementieren Sie eine Webkomponente Carousel Slider-Komponente mit dem Designstil "Neumorphism - Ein Soft-UI-Stil, der Elemente erstellt, die mit subtilen Schatten aus dem Hintergrund herauszuragen scheinen", unter Verwendung des Farbschemas "Komplementär - Farben, die sich auf dem Farbkreis gegenüberliegen" und der Komplexitätsstufe "Komplex - Reichhaltige Benutzeroberfläche mit mehreren interaktiven Elementen" für den Zweck "Portfolio - Zur Präsentation von Arbeiten oder Produkten" mit Tailwind CSS. Erstellen Sie ein responsives Design mit Unterstützung für dunkle Themen. Es wird kein JavaScript-Code benötigt, nur HTML mit Tailwind-Klassen. Verwenden Sie für den Dunkelmodus das Präfix dark: von Tailwind für das Styling. Wenn Bilder benötigt werden, verwenden Sie picsum.photos für Bilder und randomuser.me für Avatare.