CCHub Logo CCHub Tailwind Collection
Komponenten Karussell-Schieberegler Karussell-Slider-Komponente

Karussell-Slider-Komponente

Eine reaktionsschnelle Karussell-Slider-Komponente, die mit Tailwind CSS im Brutalismus-Stil gestaltet wurde und sich durch hohen Kontrast, ungewöhnliche Layouts und Unterstützung für dunkle Themen auszeichnet.

Vorschau

HTML-Code 

<div class="relative w-full h-64 overflow-hidden bg-gray-800" data-theme="dark">
    <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="absolute w-full h-full bg-gray-800 transition duration-300 ease-in-out transform scale-110 opacity-75"></div>
        <div class="carousel-slide transition-all duration-500 ease-in-out transform space-x-4">
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1">
                <p class="text-white mt-2">Slide 1</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2">
                <p class="text-white mt-2">Slide 2</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3">
                <p class="text-white mt-2">Slide 3</p>
            </div>
            <div class="carousel-item bg-gray-900 h-64 flex justify-center items-center flex-col">
                <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=4" alt="Carousel Image 4">
                <p class="text-white mt-2">Slide 4</p>
            </div>
        </div>
    </div>
    <button class="absolute left-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❮
    </button>
    <button class="absolute right-4 top-1/2 transform -translate-y-1/2 p-2 bg-gray-700 rounded-full text-white hover:bg-gray-600 focus:outline-none">
        ❯
    </button>
</div>
<style>
    [data-theme="dark"] {
        background-color: #1a202c;
    }
</style>

Verwandte Komponenten

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.

Offen

Karussell-Slider-Komponente

Eine minimalistische Karussell-Slider-Komponente, die für Blogs und den Konsum von Inhalten entwickelt wurde, mit triadischem Farbschema und responsivem Design mit Unterstützung für dunkle Themen.

Offen

Brutalismus Karussell Schieberegler Komponente

Brutalism Carousel Slider mit Tailwind CSS, Reaktionsfähigkeit und Dunkelmodus. Enthält Navigationsschaltflächen und verwendet Platzhalterbilder.

Offen