CCHub Logo CCHub Tailwind Collection
Komponenten Karussell-Schieberegler Retro_Vintage_Agriculture_Carousel

Retro_Vintage_Agriculture_Carousel

Eine Karussell-Slider-Komponente im Retro-/Vintage-Stil für Landwirtschafts-/Landwirtschafts-Websites mit monochromatischem Design, nostalgischer Ästhetik der 80er/90er Jahre und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<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>

Verwandte Komponenten

Karussell-Slider-Komponente

Eine einfache, reaktionsschnelle Karussell-Slider-Komponente mit sauberer Typografie und Sepia-/Brauntönen für Dokumentations- und Wissensdatenbanken. Inklusive Unterstützung für den Dunkelmodus.

Offen

Karussell-Slider-Komponente im Dunkelmodus

Dark Mode Carousel Slider Component mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Karussell-Slider-Komponente

Eine reaktionsschnelle Karussell-Slider-Komponente mit Unterstützung für den Dunkelmodus. Diese Komponente verwendet nur HTML und Tailwind CSS ohne JavaScript. Es verfügt über ein einfaches Layout mit lebendigen Farben für die aktive Folie, das sich für den Konsum von Blogs oder Inhalten eignet.

Offen