CCHub Logo CCHub Tailwind Collection
구성 요소 캐러셀 슬라이더 레트로캐러셀슬라이더

레트로캐러셀슬라이더

비즈니스 웹 사이트를 위한 간단하고 반응이 빠른 레트로 테마의 캐러셀 슬라이더 구성 요소로, 다크 모드를 지원하고 JavaScript가 없습니다.

미리 보기

HTML 코드 

<div class="relative w-full max-w-4xl mx-auto overflow-hidden rounded-lg shadow-lg">
  <!-- Carousel Wrapper -->
  <div class="relative h-96">
    <!-- Slide 1 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100" data-carousel-item>
      <img src="https://picsum.photos/seed/retro1/1200/400" alt="Slide 1" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Innovation That Endures</h2>
      </div>
    </div>

    <!-- Slide 2 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
      <img src="https://picsum.photos/seed/retro2/1200/400" alt="Slide 2" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Timeless Solutions for Tomorrow</h2>
      </div>
    </div>

    <!-- Slide 3 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
      <img src="https://picsum.photos/seed/retro3/1200/400" alt="Slide 3" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Building on a Legacy of Quality</h2>
      </div>
    </div>
  </div>

  <!-- Carousel Navigation (Optional - for visual representation, actual prev/next usually needs JS) -->
  <div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-2">
    <button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
    <button class="w-3 h-3 bg-gray-500 rounded-full dark:bg-gray-400"></button>
    <button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
  </div>
</div>

<style>
  /* A very basic animation for demonstration, typically this would be handled by JS for a real carousel */
  /* This CSS just cycles opacity for

관련 구성 요소

Retro_Vintage_Sunset_Carousel_Slider_Component

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

열다

Playful_Forest_Agriculture_Carousel

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

열다

Carousel Slider 구성 요소

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

열다