CCHub Logo CCHub Tailwind Collection
コンポーネント カルーセルスライダー Retro_Vintage_Agriculture_Carousel

Retro_Vintage_Agriculture_Carousel

農業/農業Webサイト向けのレトロ/ヴィンテージをテーマにしたカルーセルスライダーコンポーネントで、モノクロのデザイン、ノスタルジックな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>

関連コンポーネント

カルーセルスライダーコンポーネント

シンプルで応答性の高いカルーセル スライダー コンポーネントで、クリーンなタイポグラフィ、セピア/ブラウンの色調で、ドキュメントやナレッジ ベース サイトに適しています。ダーク モードのサポートが含まれています。

開ける

カルーセルスライダーコンポーネント

ダークモードをサポートするeコマース用のレスポンシブカルーセルスライダーコンポーネント。商品画像、名前、価格、カートに入れるボタンが特徴です。デザインはダークモードに適した補色を採用し、視覚的な快適性と製品のプレゼンテーションを向上させます。

開ける

ダークモードカルーセルスライダーコンポーネント

Dark-Mode Carousel Slider Componentは、レスポンシブ効果とTailwind CSSを使用したダークテーマのサポートを備えています。

開ける