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
3D_Vibrant_Simple_Social_Carousel
Un composant de curseur de carrousel simple, dynamique et réactif inspiré de la 3D pour les interfaces de médias sociaux, avec prise en charge du mode sombre.
Curseur de carrousel Composant 28
Un composant de curseur de carrousel minimaliste doté d’un design réactif et d’une prise en charge du thème sombre.
Glassmorphism Carrousel Slider
Un composant de curseur de carrousel réactif avec un style glassmorphism, adapté à la consommation de blog et de contenu. Il comporte plusieurs diapositives de contenu, des éléments en verre dépoli et est conçu pour les thèmes clairs et sombres.