Screens Carousel Blueprint
A static carousel blueprint of five app screens with prev and next affordances, dot indicators, and a thumbnail strip with one slide active.
A static carousel blueprint of five app screens with prev and next affordances, dot indicators, and a thumbnail strip with one slide active.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Screens Carousel Blueprint renders a five-slide carousel of Tend mobile app screens as a static blueprint: one active Placeholder at aspect-video with prev/next chevron buttons and a slide label overlay in the bottom-right, dot indicators below the main slide with the active dot widened to a pill, and a thumbnail strip of five smaller Placeholders with the active one ringed. No JavaScript, no Radix portal, pure rendered markup.
The active index is a const set to slide 2, the monthly report screen. The blueprint pattern is the distinctive choice: it lets screenshots and iframes capture a realistic carousel state without any JavaScript running.
Reach for this block on a product design case study page or as the screens section of a mobile app portfolio. The installer sets activeIndex to whichever slide they want foregrounded and swaps the five slide labels and captions for their actual screen names.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product screens carousel blueprint. Other static carousel layouts:
Tip: set activeIndex to a dense, interesting screen, not the first one; it shows range immediately.