shadcn.io is not affiliated with official shadcn/ui
Carousel Gallery Block for Svelte
Nine drawn trail pictures in a ruled band for a trail-guide app, three wide with the next one cut off at the rail, turned with buttons, dots and the arrow keys, under a heading row with a live counter.
Installation
Overview
A carousel gallery for Svelte with Ark UI, for Cairnly, a trail-guide app. A compact header holds the previous and next buttons and a "1–3 of 9" counter at its end, and under it a ruled band that runs from rail to rail holds the track: three pictures wide from lg, two from md, one on a phone, with the next picture cut off at the rail so it is clear there is more. Each picture sits in its own hairline cell with its title, place and year, and a row of dots under the band shows where you are and goes straight to a picture. The pictures are drawn, not photographed: a small kit of scenes (hills, a mountain range, a lake, a forest, dunes, a night camp and a coast) in your theme's greys, each a few lines of data you swap for your photographs. Nothing plays by itself. It's built from Carousel, Button and Guides, with CSS transitions and your theme's tokens for every colour. The app, places and years are made up for the example.
FAQ
How do I use my own photographs?
Each picture in PICTURES has a title, a place, a year and a scene; add your image's address to it and replace the Scene in the slide with <img alt="" className="size-full object-cover" src={…} /> (the figure's caption already names it). The comment above Scene says where. Keep the pictures one shape, 4 wide for 3 high, or change RATIO and the aspect-4/3 class together.
How is the next picture cut off at the rail?
The track shows 1.15 pictures on a phone, 2.3 from md and 3.3 from lg, so a part of the next picture always shows. The counter and the dots count whole pictures: "4–6 of 9" means pictures four to six are fully in view. Off-view slides are hidden from the tab order and from screen readers, so only what you can read is reachable.
The block sets the page and the number of slides per page on the Ark Carousel, and the stylesheet sets the fractional size.
How does it work with a keyboard?
Tab reaches the previous and next buttons and the dots. With focus on any of them, the arrow keys turn the track (mirrored in a right-to-left layout), and Enter or Space on a dot goes to that picture. Previous and next wrap around, so a button never disables while it has focus. The counter is a polite live region, so a screen reader hears "5–7 of 9" after a move.
Does it swipe on a phone?
Yes. The track follows a finger and snaps to a picture; the buttons and dots do the same. Under reduced motion the transitions are still, the pictures simply change place.