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 conçu dans un style brutaliste à l’aide de Tailwind CSS, avec un contraste élevé, des mises en page inhabituelles et la prise en charge des thèmes sombres.
Retro_Vintage_Sunset_Carousel_Slider_Component
Un composant de curseur de carrousel complexe et réactif avec une esthétique rétro/vintage, une palette de couleurs chaudes de coucher de soleil, conçu pour les cas d’utilisation du tableau de bord. Comprend des flèches de navigation, des points et la prise en charge du mode sombre.
Composant de curseur de carrousel
Implémentez un composant Web Carrousel Slider Component avec le style de conception « Neumorphisme - Un style d’interface utilisateur doux qui crée des éléments semblant extruder de l’arrière-plan à l’aide d’ombres subtiles » en utilisant le schéma de couleurs « Complémentaire - Couleurs opposées les unes aux autres sur la roue chromatique » et le niveau de complexité « Complexe - Interface riche avec plusieurs éléments interactifs », à l’objectif « Portfolio - Pour présenter le travail ou les produits » à l’aide de Tailwind CSS. Créez un design réactif avec la prise en charge du thème sombre. Aucun code JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Si vous avez besoin d’images, utilisez picsum.photos pour les images et randomuser.me pour les avatars.