Retro_Vintage_Agriculture_Carousel
A retro/vintage-themed carousel slider component for agriculture/farming websites, featuring monochromatic design, nostalgic 80s/90s aesthetics, and full responsiveness with dark mode support.
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>Related Components
Carousel Slider Component
A complex, responsive carousel slider component for news/journalism websites, featuring a dark mode UI with a grayscale color scheme. It displays news articles with images, titles, descriptions, and categories, and is designed to reduce eye strain.
Neumorphism Carousel Slider
Responsive Carousel Slider Component with Neumorphism style, Pastel color scheme, Moderate complexity, Social Media purpose, and Dark theme support using Tailwind CSS.
Brutalism_News_Carousel
A simple, brutalist-style carousel slider component for news and journalism websites, featuring high contrast, cool neutrals, and full responsiveness with dark mode support. Uses placeholder images and emphasizes raw visual elements.