Retro_Vintage_Agriculture_Carousel
Un composant de curseur de carrousel à thème rétro/vintage pour les sites Web agricoles, avec un design monochrome, une esthétique nostalgique des années 80/90 et une réactivité totale avec prise en charge du mode sombre.
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>Composants associés
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif pour le commerce électronique avec prise en charge du mode sombre. Il présente des images de produits, des noms, des prix et des boutons d’ajout au panier. Le design utilise une palette de couleurs complémentaires adaptée au mode sombre, améliorant le confort visuel et la présentation du produit.
Skeuomorphic_Dating_Carousel
Un composant de curseur de carrousel simple et réactif avec des éléments de conception skeuomorphes et une palette de couleurs analogue, adapté aux plateformes de rencontres ou sociales. Inclut la prise en charge du mode sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel minimaliste conçu pour les blogs et la consommation de contenu, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.