Composant de curseur de carrousel
Un composant de curseur de carrousel simple conçu pour le commerce électronique en mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="relative w-full max-w-lg mx-auto">
<div class="overflow-hidden rounded-lg shadow-lg">
<div class="carousel-inner dark:bg-gray-800 bg-gray-100">
<div class="carousel-item active">
<img src="https://picsum.photos/800/400?1" alt="Product 1" class="w-full h-auto">
<div class="p-4">
<h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 1</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">Description of product 1</p>
<button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?2" alt="Product 2" class="w-full h-auto">
<div class="p-4">
<h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 2</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">Description of product 2</p>
<button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/800/400?3" alt="Product 3" class="w-full h-auto">
<div class="p-4">
<h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 3</h2>
<p class="text-sm text-gray-700 dark:text-gray-300">Description of product 3</p>
<button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
</div>
</div>
</div>
<!-- Carousel controls (optional) -->
<button class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
❮
</button>
<button class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
❯
</button>
</div>
</div>
<style>
.carousel-inner {
display: flex;
transition: transform 0.5s ease;
}
.carousel-item {
min-width: 100%;
box-sizing: border-box;
}
</style>Composants associés
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.
Curseur de carrousel de neumorphisme
Composant de curseur de carrousel réactif avec style Neumorphism, palette de couleurs pastel, complexité modérée, objectif de médias sociaux et prise en charge du thème sombre à l’aide de Tailwind CSS.
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.