gallery carousel slider images navigation gallery carousel slider images navigation dots prev next image carousel with navigation photo slider with dots
Gallery Carousel
Fetch pattern JSON:
curl https://webspire.de/patterns/gallery/carousel.json carousel.html
<section class="ws-gallery bg-[var(--ws-gallery-bg)] py-20">
<div class="mx-auto max-w-4xl px-6">
<div class="text-center">
<h2 class="text-3xl font-bold tracking-tight text-[var(--ws-gallery-text)] sm:text-4xl">Featured work</h2>
<p class="mt-3 text-lg text-[var(--ws-gallery-text-soft)]">Swipe through our latest projects.</p>
</div>
<div class="relative mt-12">
<!-- Carousel container -->
<div id="carousel-track" class="flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth scrollbar-none">
<div class="w-full flex-shrink-0 snap-center">
<div class="flex w-full items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-200 to-indigo-300 aspect-[9/5]" aria-label="Project 1">
<svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
</div>
</div>
<div class="w-full flex-shrink-0 snap-center">
<div class="flex w-full items-center justify-center rounded-2xl bg-gradient-to-tr from-emerald-200 to-emerald-300 aspect-[9/5]" aria-label="Project 2">
<svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
</div>
</div>
<div class="w-full flex-shrink-0 snap-center">
<div class="flex w-full items-center justify-center rounded-2xl bg-gradient-to-bl from-amber-200 to-amber-300 aspect-[9/5]" aria-label="Project 3">
<svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
</div>
</div>
<div class="w-full flex-shrink-0 snap-center">
<div class="flex w-full items-center justify-center rounded-2xl bg-gradient-to-tl from-rose-200 to-rose-300 aspect-[9/5]" aria-label="Project 4">
<svg class="h-8 w-8 text-slate-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0023.25 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" /></svg>
</div>
</div>
</div>
<!-- Prev / Next -->
<button type="button" onclick="document.getElementById('carousel-track').scrollBy({left:-document.getElementById('carousel-track').offsetWidth,behavior:'smooth'})"
class="absolute left-3 top-1/2 -translate-y-1/2 rounded-full bg-white/90 p-2.5 shadow-md transition hover:bg-white" aria-label="Previous">
<svg class="h-5 w-5 text-slate-700" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" /></svg>
</button>
<button type="button" onclick="document.getElementById('carousel-track').scrollBy({left:document.getElementById('carousel-track').offsetWidth,behavior:'smooth'})"
class="absolute right-3 top-1/2 -translate-y-1/2 rounded-full bg-white/90 p-2.5 shadow-md transition hover:bg-white" aria-label="Next">
<svg class="h-5 w-5 text-slate-700" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>
</button>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste Requires JS
Stable Published
gallerycarouselsliderimagesnavigation
Slots
| Name | Required | Description |
|---|---|---|
| heading | No | Optional section title. |
| slides | Yes | Horizontally scrollable image slides. |
| controls | Yes | Previous/next buttons and dot indicators. |
Horizontal image carousel using CSS scroll-snap for smooth snapping. Previous/next arrow buttons on either side. Dot indicators below show current slide. Fully responsive — shows one image at a time on mobile, wider on desktop. Minimal vanilla JS for button clicks.