Composant de curseur de carrousel
Un composant de curseur de carrousel minimaliste conçu pour les blogs et la consommation de contenu, avec une palette de couleurs triadique et un design réactif avec prise en charge du thème sombre.
HTML Code
<div class="carousel w-full relative">
<div class="carousel-inner relative w-full overflow-hidden">
<!-- Slide 1 -->
<div class="carousel-item active relative float-left w-full">
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
<img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-48 object-cover rounded-md mb-4" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio.</p>
</div>
</div>
<!-- Slide 2 -->
<div class="carousel-item relative float-left w-full">
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
<img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-48 object-cover rounded-md mb-4" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Suspendisse potenti. Praesent dapibus, neque id vestibulum.</p>
</div>
</div>
<!-- Slide 3 -->
<div class="carousel-item relative float-left w-full">
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-md shadow-md">
<img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-48 object-cover rounded-md mb-4" />
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit.</p>
</div>
</div>
</div>
<a class="carousel-control-prev absolute top-1/2 left-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Previous">
<span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full"><</span>
</a>
<a class="carousel-control-next absolute top-1/2 right-0 transform -translate-y-1/2 z-10" href="#" role="button" aria-label="Next">
<span class="inline-block bg-gray-600 dark:bg-gray-400 p-2 rounded-full">></span>
</a>
</div>Composants associés
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.
Composant de curseur de carrousel
Implémentez un composant Web Carrousel Slider Component avec le style de conception « Neumorphisme - Un style d’interface utilisateur doux qui crée des éléments semblant extruder de l’arrière-plan à l’aide d’ombres subtiles » en utilisant le schéma de couleurs « Complémentaire - Couleurs opposées les unes aux autres sur la roue chromatique » et le niveau de complexité « Complexe - Interface riche avec plusieurs éléments interactifs », à l’objectif « Portfolio - Pour présenter le travail ou les produits » à l’aide de Tailwind CSS. Créez un design réactif avec la prise en charge du thème sombre. Aucun code JavaScript n’est nécessaire, seulement du HTML avec des classes Tailwind. Pour le mode sombre, utilisez le préfixe dark : de Tailwind pour le coiffage. Si vous avez besoin d’images, utilisez picsum.photos pour les images et randomuser.me pour les avatars.
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.