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

Karussell-Slider-Komponente

Eine einfache Karussell-Slider-Komponente, die für den E-Commerce im Dunkelmodus mit Tailwind CSS entwickelt wurde.

Vorschau

HTML-Code 

<div class="relative w-full max-w-lg mx-auto">
    <div class="overflow-hidden rounded-lg shadow-lg">
        <div class="carousel-inner dark:bg-gray-800 bg-gray-100">
            <div class="carousel-item active">
                <img src="https://picsum.photos/800/400?1" alt="Product 1" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 1</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 1</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?2" alt="Product 2" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 2</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 2</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?3" alt="Product 3" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 3</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 3</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
        </div>

        <!-- Carousel controls (optional) -->
        <button class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10094;
        </button>
        <button class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10095;
        </button>
    </div>
</div>

<style>
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}
</style>

Verwandte Komponenten

Neon Glow Lebensmittelkarussell-Schieberegler

Eine komplexe, reaktionsschnelle Karussell-Slider-Komponente mit Neon-Leuchteffekten und einem Bonbon-/Süßigkeits-Farbschema, das für Essenslieferungen und Restaurant-Websites entwickelt wurde, einschließlich Unterstützung des Dunkelmodus.

Offen

3D-Karussell-Slider-Komponente für Portfolio

Eine reaktionsschnelle, von 3D inspirierte Karussell-Slider-Komponente zur Präsentation von Portfolio-Elementen mit Komplementärfarben und Unterstützung für den Dunkelmodus. Entworfen mit Blick auf Tiefe und Engagement.

Offen

Neumorphism E-Commerce Karussell-Schieberegler

Eine reaktionsschnelle neumorphe Karussell-Slider-Komponente mit Unterstützung für dunkle Designs für E-Commerce, die Tailwind CSS verwendet. Es verfügt über ein komplementäres Farbschema. Es wird kein JavaScript verwendet.

Offen