Composant de curseur de carrousel
Un composant de curseur de carrousel simple et réactif conçu pour les applications de sport/fitness avec une interface utilisateur en mode sombre, une palette de couleurs noir et blanc et une couleur d’accentuation vive.
HTML Code
<div class="relative w-full max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8 bg-white dark:bg-gray-900 rounded-lg shadow-xl">
<div class="overflow-hidden rounded-lg">
<div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
<!-- Slide 1 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports1/1200/800" alt="Fitness Training" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Intense Training Session</h3>
<p class="text-base text-gray-200">Push your limits and achieve your fitness goals with our advanced programs.</p>
</div>
</div>
<!-- Slide 2 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports2/1200/800" alt="Team Collaboration" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Teamwork Makes the Dream Work</h3>
<p class="text-base text-gray-200">Join a community of athletes and elevate your performance together.</p>
</div>
</div>
<!-- Slide 3 -->
<div class="flex-shrink-0 w-full relative h-72 sm:h-96 md:h-128 bg-gray-800 dark:bg-gray-950 rounded-lg overflow-hidden flex flex-col justify-end p-6">
<img src="https://picsum.photos/seed/sports3/1200/800" alt="Healthy Lifestyle" class="absolute inset-0 w-full h-full object-cover opacity-70" />
<div class="relative z-10 text-white">
<h3 class="text-2xl sm:text-3xl font-bold mb-2 text-yellow-400">Embrace a Healthier You</h3>
<p class="text-base text-gray-200">Discover personalized routines and nutritional guidance for a better lifestyle.</p>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons (for visual representation, functionality would require JS) -->
<button class="absolute top-1/2 left-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<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>
<button class="absolute top-1/2 right-4 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-3 rounded-full shadow-lg hover:bg-gray-600 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2 focus:ring-offset-gray-900">
<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>
<!-- Dots/Indicators (for visual representation, functionality would require JS) -->
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2">
<span class="block w-3 h-3 rounded-full bg-yellow-400"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
<span class="block w-3 h-3 rounded-full bg-gray-400 dark:bg-gray-600"></span>
</div>
</div>Composants associés
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.
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif avec prise en charge du mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript. Il présente une mise en page simple avec des couleurs vives pour la diapositive active, adaptée au blog ou à la consommation de contenu.
Neumorphism E-commerce Carrousel Slider
Un composant de curseur de carrousel neumorphique réactif avec prise en charge du thème sombre pour le commerce électronique, à l’aide de Tailwind CSS. Il présente une palette de couleurs complémentaire. Aucun JavaScript n’est utilisé.