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.
HTML Code
<div class="dark:bg-gray-900 bg-white py-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold dark:text-white text-gray-900 mb-6">Featured Products</h2>
<div class="relative">
<div class="carousel-container relative overflow-hidden">
<div class="carousel-track flex transition-transform duration-500 ease-in-out">
<!-- Product Card 1 -->
<div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Stylish Headphones</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Experience immersive sound with these premium headphones.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$120.00</span>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Smartwatch Pro</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Stay connected and track your fitness with this advanced smartwatch.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$199.00</span>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Portable Bluetooth Speaker</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Enjoy your music anywhere with this powerful and compact speaker.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$75.00</span>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
<!-- Product Card 4 -->
<div class="carousel-item flex-shrink-0 w-full sm:w-1/2 lg:w-1/3 px-4">
<div class="bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Ergonomic Office Chair</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Work in comfort and style with this adjustable office chair.</p>
<div class="flex items-center justify-between">
<span class="text-xl font-bold text-gray-900 dark:text-white">$250.00</span>
<button class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded-full transition duration-300">
Add to Cart
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Navigation Buttons (Optional - can be styled with Tailwind) -->
<button class="carousel-prev absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-2 rounded-full shadow-lg z-10">
❮
</button>
<button class="carousel-next absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-700 dark:bg-gray-800 text-white p-2 rounded-full shadow-lg z-10">
❯
</button>
</div>
</div>
</div>
<style>
.carousel-track {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
}
.carousel-item {
scroll-snap-align: start;
}
.carousel-container {
overflow-x: scroll;
scrollbar-width: none; /* Hide scrollbar for Firefox */
-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}
.carousel-container::-webkit-scrollbar {
display: none; /* Hide scrollbar for Chrome, Safari and Opera */
}
</style>Composants associés
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
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.
Playful_Forest_Agriculture_Carousel
Un composant de curseur de carrousel ludique et amusant conçu pour l’agriculture et les sites Web agricoles, avec une palette de couleurs forêt/vert, des éléments arrondis et une réactivité totale avec la prise en charge du mode sombre.