3D-Karussell-Schieberegler
Ein einfacher und reaktionsschneller Karussell-Schieberegler mit einem 3D-Designstil und einem pastellfarbenen Farbschema für Social-Media-Schnittstellen, der den Dunkelmodus unterstützt.
HTML-Code
<div class="relative w-full max-w-2xl mx-auto mt-10">
<!-- Carousel container -->
<div class="overflow-hidden rounded-lg shadow-2xl">
<div class="flex transition-transform duration-300 ease-in-out transform perspective-1000">
<!-- Carousel item 1 -->
<div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-blue rounded-lg">
<img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=1" alt="Carousel Image 1">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 1</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Description for image 1.</p>
</div>
</div>
<!-- Carousel item 2 -->
<div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-green rounded-lg">
<img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=2" alt="Carousel Image 2">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 2</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Description for image 2.</p>
</div>
</div>
<!-- Carousel item 3 -->
<div class="w-full flex-shrink-0 transition-all duration-500 transform hover:scale-105 dark:bg-gray-800 bg-pastel-yellow rounded-lg">
<img class="w-full h-full object-cover" src="https://picsum.photos/600/300?random=3" alt="Carousel Image 3">
<div class="p-4">
<h2 class="text-lg font-semibold text-gray-700 dark:text-gray-200">Image Title 3</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Description for image 3.</p>
</div>
</div>
</div>
</div>
<!-- Navigation buttons -->
<button class="absolute top-1/2 left-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
❮
</button>
<button class="absolute top-1/2 right-0 z-10 p-2 text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">
❯
</button>
<!-- Avatar section -->
<div class="flex justify-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full shadow-lg">
<span class="text-lg font-medium text-gray-800 dark:text-gray-200 ml-2">User Name</span>
</div>
</div>Verwandte Komponenten
Glasmorphismus-Karussell-Schieberegler
Eine reaktionsschnelle Karussell-Slider-Komponente im Glassmorphism-Stil, die für den Konsum von Blogs und Inhalten geeignet ist. Es verfügt über mehrere Inhaltsfolien, mattglasähnliche Elemente und ist sowohl für helle als auch für dunkle Themen konzipiert.
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.
Karussell-Schieber Komponente 28
Eine minimalistische Karussell-Slider-Komponente mit responsivem Design und Unterstützung für dunkle Themen.