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.
HTML-Code
<section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
<div class="flex flex-col items-center justify-center max-w-screen-lg">
<div class="flex items-center justify-center w-full h-auto">
<div class="w-full h-full carousel">
<div class="carousel-inner">
<input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
<div class="items-center justify-center block h-full carousel-item">
<div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
<div class="w-full lg:w-1/2">
<img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
</div>
<div class="w-full px-6 py-12 lg:w-1/2">
<h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
<p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
<div class="mt-8">
<button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
</div>
</div>
</div>
</div>
<label for="carousel-3" class="carousel-control prev control-1">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-2" class="carousel-control next control-1">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
<label for="carousel-1" class="carousel-control prev control-2">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-3" class="carousel-control next control-2">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
<label for="carousel-2" class="carousel-control prev control-3">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
</svg>
</button>
</label>
<label for="carousel-1" class="carousel-control next control-3">
<button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
</button>
</label>
</div>
</div>
</div>
</div>
<style>
.carousel-open:checked + .carousel-item {
position: static;
opacity: 100;
}
.carousel-item {
-webkit-transition: opacity 0.6s ease-out;
transition: opacity 0.6s ease-out;
visibility: hidden;
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
z-index: 0;
}
.carousel-open:checked ~ .carousel-item:not(.carousel-item) {
opacity: 0;
}
.carousel-open:checked ~ .control-1,
.carousel-open:checked ~ .control-2,
.carousel-open:checked ~ .control-3 {
display: flex;
}
.carousel-control {
z-index: 1;
display: none;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
bottom: 0;
width: 10%;
cursor: pointer;
opacity: 50%;
transition: opacity 150ms ease-in-out;
}
.carousel-control:hover {
opacity: 100%;
}
.control-1,
.control-2,
.control-3 {
width: 5vh;
height: 5vh;
border-radius: 50%;
position: absolute;
}
.control-1 {
top: 45%;
left: 5%;
}
.control-2 {
top: 45%;
right: 5%;
}
.control-3 {
top: 45%;
left: 5%;
}
</style>
</section>Verwandte Komponenten
Playful_Forest_Agriculture_Carousel
Eine verspielte und unterhaltsame Karussell-Slider-Komponente, die für die Landwirtschaft und landwirtschaftliche Websites entwickelt wurde, mit einer Wald-/Grün-Farbpalette, abgerundeten Elementen und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.
Brutalismus Karussell Schieberegler Komponente
Brutalism Carousel Slider mit Tailwind CSS, Reaktionsfähigkeit und Dunkelmodus. Enthält Navigationsschaltflächen und verwendet Platzhalterbilder.
Karussell-Slider-Komponente
Eine komplexe, reaktionsschnelle Karussell-Slider-Komponente für Nachrichten-/Journalismus-Websites mit einer Benutzeroberfläche im Dunkelmodus mit einem Graustufen-Farbschema. Es zeigt Nachrichtenartikel mit Bildern, Titeln, Beschreibungen und Kategorien an und wurde entwickelt, um die Belastung der Augen zu reduzieren.