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

Retro_Vintage_Agriculture_Carousel

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

미리 보기

HTML 코드 

<section class="py-12 bg-lime-50 dark:bg-zinc-900 overflow-hidden font-mono">
  <div class="container mx-auto px-4">
    <h2 class="text-center text-4xl md:text-5xl font-bold mb-12 text-lime-800 dark:text-lime-200 uppercase tracking-widest leading-tight">
      Our Harvest Gallery
    </h2>

    <div class="relative w-full max-w-5xl mx-auto" x-data="{ activeSlide: 0, slides: [ 'https://picsum.photos/1200/600?random=1&seed=agriculture', 'https://picsum.photos/1200/600?random=2&seed=farming', 'https://picsum.photos/1200/600?random=3&seed=tractor', 'https://picsum.photos/1200/600?random=4&seed=crop' ] }">

      <!-- Carousel Wrapper -->
      <div class="relative h-64 md:h-96 lg:h-[400px] overflow-hidden rounded-lg shadow-xl border-4 border-lime-700 dark:border-lime-300 transform -skew-x-3">
        <template x-for="(slide, index) in slides" :key="index">
          <img :src="slide" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-700 ease-in-out" :class="{'opacity-100 transform skew-x-3': activeSlide === index, 'opacity-0': activeSlide !== index}" :alt="'Agricultural image ' + (index + 1)">
        </template>
      </div>

      <!-- Navigation Dots -->
      <div class="absolute bottom-4 left-0 right-0 flex justify-center space-x-2">
        <template x-for="(slide, index) in slides" :key="index">
          <button @click="activeSlide = index" :aria-label="'Go to slide ' + (index + 1)" class="w-4 h-4 rounded-full border-2 border-lime-700 dark:border-lime-300 transition-colors duration-300" :class="{'bg-lime-700 dark:bg-lime-300 scale-125': activeSlide === index, 'bg-lime-200 dark:bg-zinc-700': activeSlide !== index}"></button>
        </template>
      </div>

      <!-- Previous Button -->
      <button @click="activeSlide = (activeSlide === 0 ? slides.length - 1 : activeSlide - 1)" class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-lime-700 dark:bg-lime-300 text-white dark:text-zinc-900 p-3 rounded-full shadow-lg transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 border-2 border-lime-800 dark:border-lime-200" aria-label="Previous slide">
        <svg class="w-6 h-6" 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>

      <!-- Next Button -->
      <button @click="activeSlide = (activeSlide === slides.length - 1 ? 0 : activeSlide + 1)" class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-lime-700 dark:bg-lime-300 text-white dark:text-zinc-900 p-3 rounded-full shadow-lg transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-600 border-2 border-lime-800 dark:border-lime-200" aria-label="Next slide">
        <svg class="w-6 h-6" 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>

      <!-- Caption / Overlay (Retro Aesthetic) -->
      <div class="absolute bottom-16 md:bottom-20 left-1/2 -translate-x-1/2 w-3/4 max-w-sm bg-lime-800/80 dark:bg-zinc-800/80 text-white dark:text-lime-100 p-4 text-center rounded-md border-2 border-lime-900 dark:border-zinc-700 shadow-md transform skew-x-6">
        <p class="text-sm md:text-base font-semibold uppercase tracking-wider italic">Cultivating the Future, One Seed at a Time</p>
      </div>

    </div>
  </div>
</section>

<!-- Alpine.js for basic carousel functionality. This would go in your <head> or before </body> -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

관련 구성 요소

Retro_Vintage_Sunset_Carousel_Slider_Component

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

열다

Carousel Slider 구성 요소

스포츠/피트니스 애플리케이션용으로 설계된 간단하고 반응이 빠른 캐러셀 슬라이더 구성 요소로, 어두운 모드 UI, 흑백 색 구성표, 밝은 강조 색상을 갖추고 있습니다.

열다

Carousel Slider 구성 요소

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

열다