गैलरी
Photo Grid Gallery
An even, responsive grid of captioned photos with no JavaScript.
#gallery#grid#images
6 फ्रेमवर्कशुरुआती
Loading…
A one-slide-at-a-time carousel with arrows, dot navigation and a live caption.
<!--
One large slide at a time. The stage is a polite live region so the caption
change is announced; the dots carry aria-current for the selected slide (ring
+ fill, never colour alone). Arrow controls are >=40px targets. Slide logic is
in the React/TS tabs.
-->
<section class="relative w-full" aria-roledescription="carousel" aria-label="Featured photos">
<div class="overflow-hidden rounded-2xl" aria-live="polite">
<div class="relative aspect-video w-full bg-gradient-to-br from-sky-400 to-indigo-600" role="img" aria-label="Sky-blue to indigo gradient">
<p class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent px-4 pb-3 pt-10 text-base font-semibold text-white">Coastline</p>
</div>
</div>
<button type="button" aria-label="Previous photo" class="absolute left-2 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-lg text-gray-800 shadow hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2">‹</button>
<button type="button" aria-label="Next photo" class="absolute right-2 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-white/90 text-lg text-gray-800 shadow hover:bg-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2">›</button>
<div class="mt-3 flex justify-center gap-2">
<button type="button" aria-label="Go to photo 1" aria-current="true" class="h-2.5 w-2.5 rounded-full bg-gray-300 ring-blue-600 aria-[current=true]:bg-blue-600 aria-[current=true]:ring-2 aria-[current=true]:ring-offset-2 dark:bg-gray-700 dark:aria-[current=true]:bg-blue-400"></button>
<button type="button" aria-label="Go to photo 2" class="h-2.5 w-2.5 rounded-full bg-gray-300 ring-blue-600 aria-[current=true]:bg-blue-600 aria-[current=true]:ring-2 aria-[current=true]:ring-offset-2 dark:bg-gray-700 dark:aria-[current=true]:bg-blue-400"></button>
</div>
</section>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
itemsआवश्यक | GalleryTile[] | - | रेंडर की जाने वाली आइटम की सूची। |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The stage is an `aria-live="polite"` region so the caption change is announced, and the dots carry `aria-current` shown as a ring plus fill - two signals, never colour alone. The arrow controls clear the 40px minimum target; wrap-around indexing keeps Previous and Next always live.