One screenshot shows one screen. A product usually needs three or four to make its case.
The Carousel layout keeps a single device frame on the page and slides your screens through it.
For every Dynamic Device setting in one place, see the Dynamic Device block guide.
Before You Start
- Edition: Pro — the Dynamic Device block is part of Nexter Blocks Pro.
- Block to enable: Dynamic Device, switched on under Nexter > Blocks in your WordPress dashboard.
- A screenshot of your site, cropped to roughly the shape of the screen it will sit in.
- Several screenshots, all cropped to the same shape.
Steps
- Add the Dynamic Device block and click Design from Scratch.
- Choose the Device Type — mobile, tablet, laptop or desktop — then pick the exact frame from the list below it.
- Set Layout to Carousel.
- Add your screenshots as the carousel items.
- Publish and slide through them.
How It Behaves
- Carousel changes the markup. Measured: the wrapper drops the device-type class and uses
tpgb-carousel-device-mokeupinstead. - It sizes itself sensibly — the same phone frame that rendered 2289 pixels tall at full width came out 334 by 700 in carousel mode.
- The device frame stays put and only the content moves, which is what makes it read as one phone showing several screens.
- Slide scale, opacity and shadow are all adjustable in the Style tab, so the inactive slides can sit back behind the active one.
Limitations
- Pro only.
- Screenshots of different shapes jump as they slide. Crop them all the same.
- Only the active slide is readable, so this suits a showcase rather than a comparison.
- The carousel is the whole block — a second device needs a second block.
Troubleshooting
Only one screen shows and nothing slides
Layout is still on Single. Set it to Carousel, and add more than one item.
The screens jump about as they slide
They are different shapes. Crop every screenshot to the same ratio.
The device is huge
Carousel usually sizes itself, but check the block is not stretched by a full-width container.
