shadcn.io is not affiliated with official shadcn/ui
Vertical Carousel Gallery Block for Solid
A weaving studio's day in four pictures stacked in a framed viewer and turned up and down, beside a chapter index that marks the chapter on show and goes to any of them.
Installation
Overview
A vertical carousel for Solid with Ark UI, for Loomhall, a weaving studio's journal. Four pictures of a day at the studio (dyeing, warping, weaving, finishing) stack top to bottom in a framed viewer at the end of a split, with Up and Down buttons and a "Chapter 2 of 4" line under it. A chapter index at the start lists the four with their time of day and one sentence each, marks the chapter on show, and each row goes straight to its picture. On a phone the viewer comes first, and the index gives way to the line under it. The pictures are drawn: a drying rack of dyed hanks, a loom with its warp, a close-up of weaving and a folded throw, in your theme's greys, light in a light theme and low-key in a dark one. It's built from Carousel, Button and Guides. The studio and its hours are made up for the example.
FAQ
How do I use my own photographs?
Each chapter in CHAPTERS has a title, a time, a summary and a scene. Replace the Scene in the slide with <img alt="" className="size-full object-cover" src={…} /> (the caption on the picture names it). The viewer is 4 wide for 5 high; change RATIO and the aspect-4/5 class together.
How does it work with a keyboard?
Tab reaches the Up and Down buttons and the chapter rows. On either button, the Up and Down arrow keys turn the viewer; on a chapter row, they move to the previous or next chapter and focus follows, so the index works like a vertical list. Enter or Space on a row goes to its picture. Down on the last chapter goes to the first, and Up on the first goes to the last.
How does the index know which chapter is showing?
The block keeps one page number. The viewer, the "Chapter 2 of 4" line (a polite live region) and the index all read it, and the row for that chapter carries aria-current and a bar at its start edge.
The page is controlled: the block passes it to the Ark Carousel and listens for its changes.
What happens to the index on a phone?
It is hidden below lg, where the viewer already has the controls, and the line under the viewer names the chapter. The viewer stays 4 wide for 5 high but narrower, so the picture is never cropped.