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
Composant de curseur de carrousel monospace
Un composant de curseur de carrousel simple, propre, inspiré du monospace, pour l’affichage de blogs/contenus, conçu avec une palette de couleurs analogue et une réactivité totale, y compris le mode sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel complexe et réactif avec une palette de couleurs bonbons/doux, des micro-interactions et une prise en charge du mode sombre, adapté aux sites Web d’événements et de conférences.
Composant de curseur de carrousel
Un composant de curseur de carrousel simple et réactif avec l’esthétique de Material Design, les tons sépia/brun et la prise en charge du mode sombre, adapté à un portfolio. N’utilise pas de JavaScript, ce qui en fait un composant purement basé sur CSS.