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

Carousel Slider 구성 요소

블로그 및 콘텐츠 소비를 위해 설계된 미니멀한 캐러셀 슬라이더 구성 요소로, 트라이어딕 색 구성표와 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

미리 보기

HTML 코드 

<div class="carousel w-full relative">
  <div class="carousel-inner relative w-full overflow-hidden">
    <!-- Slide 1 -->
    <div class="carousel-item active relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
      </div>
    </div>
    <!-- Slide 2 -->
    <div class="carousel-item relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. Praesent dapibus, neque id vestibulum.</p>
      </div>
    </div>
    <!-- Slide 3 -->
    <div class="carousel-item relative float-left w-full">
      <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
        <img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-48 object-cover rounded-md mb-4" />
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit.</p>
      </div>
    </div>
  </div>
  <a class="carousel-control-prev absolute top-1/2 left-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Previous">
    <span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full"><</span>
  </a>
  <a class="carousel-control-next absolute top-1/2 right-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Next">
    <span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full">></span>
  </a>
</div>

관련 구성 요소

3D 캐러셀 슬라이더

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

열다

Retro_Vintage_Sunset_Carousel_Slider_Component

레트로/빈티지 미학, 따뜻한 일몰 색 구성표를 갖춘 복잡하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 대시보드 사용 사례를 위해 설계되었습니다. 탐색 화살표, 점 및 다크 모드 지원이 포함됩니다.

열다

Glassmorphism 캐러셀 슬라이더

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

열다