Composants Curseur de carrousel Curseur de carrousel 3D

Curseur de carrousel 3D

Un curseur de carrousel simple et réactif avec un style de conception 3D et une palette de couleurs pastel pour les interfaces de médias sociaux, prenant en charge le mode sombre.

Aperçu

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">
        &#10094;
    </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">
        &#10095;
    </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>

Composants associés

Curseur de carrousel Composant 28

Un composant de curseur de carrousel minimaliste doté d’un design réactif et d’une prise en charge du thème sombre.

Ouvrir

Composant de curseur de carrousel

Un composant de curseur de carrousel réactif avec prise en charge des micro-interactions et du thème sombre.

Ouvrir

Composant de curseur de carrousel

Un composant de curseur de carrousel minimaliste conçu pour les blogs et la consommation de contenu, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.

Ouvrir