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.
HTML Code
<div class="relative w-full max-w-4xl mx-auto mt-10">
<div class="flex overflow-hidden rounded-lg shadow-lg">
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Slide 1">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 1</div>
</div>
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Slide 2">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 2</div>
</div>
<div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Slide 3">
<div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 3</div>
</div>
</div>
<div class="flex justify-center mt-4">
<button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Previous</button>
<button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Next</button>
</div>
<div class="mt-4 flex justify-around">
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
<p class="text-center text-white mt-2">Author 1</p>
</div>
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2">
<p class="text-center text-white mt-2">Author 2</p>
</div>
<div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 3">
<p class="text-center text-white mt-2">Author 3</p>
</div>
</div>
</div>Composants associés
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif avec prise en charge des micro-interactions et du thème sombre.
Skeuomorphic_Dating_Carousel
Un composant de curseur de carrousel simple et réactif avec des éléments de conception skeuomorphes et une palette de couleurs analogue, adapté aux plateformes de rencontres ou sociales. Inclut la prise en charge du mode sombre.
Neumorphism E-commerce Carrousel Slider
Un composant de curseur de carrousel neumorphique réactif avec prise en charge du thème sombre pour le commerce électronique, à l’aide de Tailwind CSS. Il présente une palette de couleurs complémentaire. Aucun JavaScript n’est utilisé.