Carousel Slider 구성 요소

대시보드용으로 설계된 반응형 캐러셀 슬라이더 구성 요소로, 다크 모드를 지원하는 마이크로 인터랙션과 생생한 색상을 제공합니다.

미리 보기

HTML 코드

<div class="relative w-full max-w-screen-lg mx-auto">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0);"><!-- Previous Transform: translateX(-100%) -->
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 1 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 1.</p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 2 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 2.</p>
                </div>
            </div>
            <div class="flex-shrink-0 w-full">
                <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-auto rounded-lg" />
                <div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
                    <h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 3 Title</h3>
                    <p class="text-gray-800 dark:text-gray-300">Description for slide 3.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="absolute top-1/2 left-0 transform -translate-y-1/2">
        <button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
            &#10094;
        </button>
    </div>
    <div class="absolute top-1/2 right-0 transform -translate-y-1/2">
        <button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
            &#10095;
        </button>
    </div>
    <div class="flex justify-center mt-4 space-x-2">
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
        <button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
    </div>
</div>

Carousel Slider 구성 요소

미리 보기

HTML 코드

관련 구성 요소

레트로캐러셀슬라이더

Carousel Slider 구성 요소

Neumorphism E-commerce 캐러셀 슬라이더