CCHub Logo CCHub Tailwind Collection
구성 요소 캐러셀 슬라이더 3D 캐러셀 슬라이더

3D 캐러셀 슬라이더

소셜 미디어 인터페이스를 위한 3D 디자인 스타일과 파스텔 색 구성표가 있는 간단하고 반응이 빠른 캐러셀 슬라이더로 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<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>

관련 구성 요소

Brutalism_News_Carousel

뉴스 및 저널리즘 웹사이트를 위한 단순하고 브루탈리즘 스타일의 캐러셀 슬라이더 구성 요소로, 높은 대비, 멋진 뉴트럴 색상, 다크 모드 지원으로 완벽한 응답성을 제공합니다. 자리 표시자 이미지를 사용하고 원시 시각적 요소를 강조합니다.

열다

Carousel Slider 구성 요소

스포츠/피트니스 애플리케이션용으로 설계된 간단하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 어두운 모드 UI, 흑백 색 구성표, 밝은 강조 색상을 갖추고 있습니다.

열다

네온 글로우 푸드 캐러셀 슬라이더

네온 글로우 효과와 사탕/달콤한 색 구성표가 있는 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 다크 모드 지원을 포함하여 음식 배달 및 레스토랑 웹사이트를 위해 설계되었습니다.

열다