Glassmorphism Carousel Slider Component
Carousel Slider Component with Glassmorphism design and dark mode support.
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>Related Components
Carousel Slider Component
Implement a web component Carousel Slider Component with design style "Neumorphism - A soft UI style that creates elements appearing to extrude from the background using subtle shadows" using color scheme "Complementary - Colors opposite each other on the color wheel" and complexity level "Complex - Rich interface with multiple interactive elements", for purpose "Portfolio - For showcasing work or products" using Tailwind CSS. Create a responsive design with dark theme support. No JavaScript code is needed, only HTML with Tailwind classes. For dark mode, use Tailwind's dark: prefix for styling. If images are needed, use picsum.photos for images and randomuser.me for avatars.
Carousel Slider Component
A responsive carousel slider component designed in a brutalism style using Tailwind CSS, featuring high contrast, unusual layouts, and dark theme support.
Neumorphism Carousel Slider
Responsive Carousel Slider Component with Neumorphism style, Pastel color scheme, Moderate complexity, Social Media purpose, and Dark theme support using Tailwind CSS.