---
title: "How to create a Device Slider in WordPress?"
url: https://nexterwp.com/docs/device-slider-in-wordpress/
date: 2023-02-22
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://nexterwp.com/wp-content/uploads/2024/05/device-slider-in-wordpress-1024x519.jpg
word_count: 348
---

# How to create a Device Slider in WordPress?

## Key Takeaways

- Nexter Blocks Dynamic Device block creates a device slider in the WordPress block editor by choosing Layout > Carousel and then selecting a device type, mockup design, and multiple images.
- Style > Carousel Options > Column offers Single and Multiple modes, where Single shows one slide at a time and Multiple previews the previous and next slides.
- Infinite Mode, Autoplay, Slide Speed, Dots, Arrows, and Carousel Slide tab settings let the slider loop, autoplay, show navigation, and adjust width and spacing.

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](https://nexterwp.com/docs/add-dynamic-device-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-device-mockups/)

## 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.

![The Device Type setting](https://nexterwp.com/wp-content/uploads/2026/09/ddev-device.webp)

- Set **Layout** to **Carousel**.

![The Layout setting](https://nexterwp.com/wp-content/uploads/2026/09/ddev-carousel.webp)

- 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-mokeup` instead.- **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.

## Related Docs

- [Dynamic Device: all settings](https://nexterwp.com/docs/add-dynamic-device-in-wordpress/)- [Scrolling device mockup](https://nexterwp.com/docs/website-scrolling-device-mockup-in-wordpress/)- [Portfolio showcase page](https://nexterwp.com/docs/create-website-portfolio-showcase-page-in-wordpress/)