Glassmorphism Carrousel Slider Component
Composant de curseur de carrousel avec conception Glassmorphism et prise en charge du mode sombre.
HTML Code
<div class="relative w-full" data-carousel="static">
<!-- Carousel wrapper -->
<div class="relative h-56 overflow-hidden rounded-lg md:h-96">
<!-- Item 1 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/seed/image1/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 1 Title</h2>
</div>
</div>
<!-- Item 2 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item="active">
<img src="https://picsum.photos/seed/image2/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 2 Title</h2>
</div>
</div>
<!-- Item 3 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/seed/image3/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 3 Title</h2>
</div>
</div>
<!-- Item 4 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/seed/image4/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 4 Title</h2>
</div>
</div>
<!-- Item 5 -->
<div class="hidden duration-700 ease-in-out" data-carousel-item>
<img src="https://picsum.photos/seed/image5/1920/1080" class="absolute block w-full -translate-x-1/2 top-1/2 left-1/2" alt="...">
<div class="absolute inset-0 backdrop-filter backdrop-blur-lg bg-white bg-opacity-10 flex items-center justify-center">
<h2 class="text-white text-3xl font-bold">Slide 5 Title</h2>
</div>
</div>
</div>
<!-- Slider indicators -->
<div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
<button type="button" class="w-3 h-3 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
<button type="button" class="w-3 h-3 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
</div>
<!-- Slider controls -->
<button type="button" class="absolute top-0 start-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-prev>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4"/>
</svg>
<span class="sr-only">Previous</span>
</span>
</button>
<button type="button" class="absolute top-0 end-0 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none" data-carousel-next>
<span class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none">
<svg class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 9l4-4-4-4"/>
</svg>
<span class="sr-only">Next</span>
</span>
</button>
</div>Composants associés
Composant de curseur de carrousel
Un composant de curseur de carrousel réactif conçu pour les tableaux de bord, avec des micro-interactions et des couleurs vives avec prise en charge du mode sombre.
Composant de curseur de carrousel
Un composant de curseur de carrousel complexe et réactif avec une palette de couleurs triadique pour les entreprises/professionnels, conçu pour la présentation de données météorologiques/climatiques. Inclut la prise en charge du mode sombre et utilise le HTML sémantique.
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.