구성 요소 캐러셀 슬라이더 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>

관련 구성 요소

캐러셀 슬라이더 구성 요소 28

반응형 디자인과 어두운 테마 지원을 특징으로 하는 미니멀한 캐러셀 슬라이더 구성 요소입니다.

열다

Carousel Slider 구성 요소

사탕/달콤한 색 구성표, 마이크로 인터랙션 및 다크 모드 지원을 제공하는 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 이벤트 및 컨퍼런스 웹 사이트에 적합합니다.

열다

Brutalism_News_Carousel

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

열다