CCHub Logo CCHub Tailwind Collection
구성 요소 캐러셀 슬라이더 Carousel Slider 구성 요소

Carousel Slider 구성 요소

Tailwind CSS를 사용하여 잔인한 스타일로 디자인된 반응형 캐러셀 슬라이더 구성 요소로, 고대비, 특이한 레이아웃 및 어두운 테마 지원을 특징으로 합니다.

미리 보기

HTML 코드 

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

관련 구성 요소

Playful_Forest_Agriculture_Carousel

농업 및 농업 웹사이트를 위해 설계된 재미있고 재미있는 캐러셀 슬라이더 구성 요소로, 숲/녹색 색상 팔레트, 둥근 요소, 다크 모드 지원으로 완전한 반응성을 제공합니다.

열다

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

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

열다

Retro_Vintage_Agriculture_Carousel

농업/농업 웹사이트를 위한 레트로/빈티지 테마의 캐러셀 슬라이더 구성 요소로, 단색 디자인, 향수를 불러일으키는 80/90년대 미학, 다크 모드 지원으로 완전한 응답성을 특징으로 합니다.

열다