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

Carousel Slider 구성 요소

Tailwind CSS를 사용하여 "포트폴리오 - 작업 또는 제품 전시"를 위해 "보색 - 색상환에서 서로 반대편에 있는 색상" 및 복잡성 수준 "복잡함 - 여러 대화형 요소가 있는 풍부한 인터페이스"를 사용하여 디자인 스타일 "Neumorphism - 미묘한 그림자를 사용하여 배경에서 돌출되는 것처럼 보이는 요소를 만드는 소프트 UI 스타일"로 웹 구성 요소 Carousel Slider Component를 구현합니다. 어두운 테마를 지원하는 반응형 디자인을 만들 수 있습니다. JavaScript 코드가 필요하지 않으며 Tailwind 클래스가 있는 HTML만 필요합니다. 다크 모드의 경우 스타일링을 위해 Tailwind의 dark: 접두사를 사용합니다. 이미지가 필요한 경우 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다.

미리 보기

HTML 코드 

<section class="flex items-center justify-center w-screen min-h-screen py-10 text-gray-800 bg-gray-100 dark:text-gray-200 dark:bg-gray-900">
    <div class="flex flex-col items-center justify-center max-w-screen-lg">
        <div class="flex items-center justify-center w-full h-auto">
            <div class="w-full h-full carousel">
                <div class="carousel-inner">
                    <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
                    <div class="items-center justify-center block h-full carousel-item">
                        <div class="relative flex flex-col items-center justify-center w-full mx-auto shadow-xl lg:flex-row lg:max-w-4xl rounded-xl bg-gray-100 dark:bg-gray-800">
                            <div class="w-full lg:w-1/2">
                                <img class="w-full h-full bg-center bg-cover object-cover rounded-lg" src="https://picsum.photos/seed/picsum/1920/1080">
                            </div>
                            <div class="w-full px-6 py-12 lg:w-1/2">
                                <h2 class="text-gray-800 dark:text-gray-200 text-3xl font-semibold">Heading</h2>
                                <p class="mt-4 text-gray-600 dark:text-gray-400 text-sm leading-relaxed">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nesciunt illo earum quod iste illum nobis.</p>
                                <div class="mt-8">
                                    <button class="text-indigo-500 dark:text-indigo-400 font-medium">Read More</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <label for="carousel-3" class="carousel-control prev control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-2" class="carousel-control next control-1">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                    <label for="carousel-1" class="carousel-control prev control-2">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-3" class="carousel-control next control-2">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                    <label for="carousel-2" class="carousel-control prev control-3">
                         <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                          </svg>
                        </button>
                    </label>
                    <label for="carousel-1" class="carousel-control next control-3">
                        <button class="p-2 text-gray-800 rounded-full shadow dark:text-gray-300 bg-gray-100 dark:bg-gray-700 focus:outline-none">
                          
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                        </button>
                    </label>
                </div>
            </div>
        </div>
    </div>
  <style>
    .carousel-open:checked + .carousel-item {
      position: static;
      opacity: 100;
    }

    .carousel-item {
      -webkit-transition: opacity 0.6s ease-out;
      transition: opacity 0.6s ease-out;
      visibility: hidden;
      opacity: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .carousel-open:checked ~ .carousel-item:not(.carousel-item) {
      opacity: 0;
    }


    .carousel-open:checked ~ .control-1,
    .carousel-open:checked ~ .control-2,
    .carousel-open:checked ~ .control-3 {
      display: flex;
    }

    .carousel-control {
      z-index: 1;      
      display: none;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 10%;
      cursor: pointer;
      opacity: 50%;
      transition: opacity 150ms ease-in-out;
    }


    .carousel-control:hover {
      opacity: 100%;
    }

    .control-1,
    .control-2,
    .control-3 {
      width: 5vh;
      height: 5vh;
      border-radius: 50%;
      position: absolute;
    }
  
     .control-1 {
        top: 45%;
        left: 5%;
      }

      .control-2 {
        top: 45%;
        right: 5%;
      }
  
      .control-3 {
        top: 45%;
        left: 5%;
    }
  </style>
</section>

관련 구성 요소

Glassmorphism 캐러셀 슬라이더

블로그 및 컨텐츠 소비에 적합한 glassmorphism 스타일을 가진 반응형 캐러셀 슬라이더 구성 요소입니다. 여러 콘텐츠 슬라이드, 젖빛 유리와 같은 요소를 특징으로 하며 밝은 테마와 어두운 테마 모두에 맞게 설계되었습니다.

열다

Carousel Slider 구성 요소

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

열다

Carousel Slider 구성 요소

Tailwind CSS를 사용하여 다크 모드에서 전자 상거래를 위해 설계된 간단한 캐러셀 슬라이더 구성 요소입니다.

열다