--- title: "How to create a Device Slider in Elementor for SmartWatch, Tablet or Custom Device?" url: https://theplusaddons.com/docs/device-slider-in-elementor-for-smartwatch-tablet-custom-device/ date: 2023-02-21 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "The Special Carousel layout of the Dynamic Device widget turns a set of images into a slider, with a device frame drawn over it. Before you start, one thing is..." image: https://theplusaddons.com/wp-content/uploads/2023/02/How-to-create-a-Device-Slider-in-Elementor-for-SmartWatch-Tablet-or-Custom-Device-1024x536.jpg word_count: 1417 --- # How to create a Device Slider in Elementor for SmartWatch, Tablet or Custom Device? ## - The Plus Addons for Elementor Pro ships the Dynamic Device widget, and it does not render at all when Pro is deactivated. - Special Carousel offers Mobile, Laptop, Desktop, and Custom, but no SmartWatch frame; Tablet appears only in the Normal layout. - Select Multiple Images drives the carousel, and a tested slider uses five images that produce twelve slide nodes because Infinite duplicates slides. - Style > Carousel Slide controls the mockup width, height, offset, and Z-Index, and the frame starts misplaced by default at the left edge of the widget. The **Special Carousel** layout of the **Dynamic Device** widget turns a set of images into a slider, with a device frame drawn over it. Before you start, one thing is worth knowing: this layout offers fewer device types than the normal one, and the frame needs positioning by hand. Both are covered below so you are not surprised halfway through. ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/dynamic-device-mockups/?utm_source=tpae&utm_medium=docs&utm_campaign=text) > *The **Special Carousel** layout offers **Mobile**, **Laptop**, **Desktop** and **Custom**. There is **no SmartWatch frame in this widget at all**, and **Tablet** is available only in the **Normal** layout. For a watch, a tablet slider or any other device, choose **Custom** and supply your own frame image.* ## Before You Start - **Edition:** **Pro** — **Dynamic Device** ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and there is no free version of it.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Dynamic Device** and turn its toggle on.- **Prerequisite:** the images you want in the slider, ready in the Media Library. The tested slider used five. ## Build the slider - Edit your page with Elementor and drag the **Dynamic Device** widget onto the layout.- In **Content > Content**, set **Layout** to **Special Carousel**. The single-device controls disappear and the slider controls take their place.- Choose a **Type**. The carousel offers **Mobile** (the default), **Laptop**, **Desktop** and **Custom**. For **Custom**, upload your own frame in **Media Image**.- Pick the frame in the dropdown that appears — for example **Mobile Device** defaults to **iPhone White (500px x 890px)** in this layout.- Open **Select Multiple Images** and add the images you want in the slider. This gallery is what the carousel slides through. At this point you have a working slider. The device frame, however, will almost certainly not be sitting over it — see **Position the device frame** below. ## Slider options The slider behaviour lives in **Style > Carousal Options**. The panel spells it **Carousal**, with an *a*, in both the section name and **Carousal Column**, so that is what to look for. ![Style > Carousal Options with the Special Carousel layout selected.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-carousel-options.webp) | Setting | What it does | Default | | ------- | ------------ | ------- | | **Carousal Column** | **Single Slide** shows one slide at a time. **Multiple** shows the neighbouring slides beside the centred one. | Multiple | | **Infinite** | Loops the slider endlessly. While it is on, the slider quietly duplicates slides so the loop is seamless. | Enable | | **Autoplay** | Advances the slider on its own. | Disable | | **Autoplay Speed** | How long each slide is held, in milliseconds. Range 500 to 10000. Only shown with **Autoplay** enabled. | 4000 | | **Slide Speed** | How long the transition between slides takes, in milliseconds. Range 200 to 5000. | 700 | | **Dots** | Shows the dot navigation under the slider. | Disable | | **Arrows** | Shows the previous and next arrows. | Disable | **Dots** and **Arrows** are both off out of the box, so turn on whichever navigation you want. Their appearance is styled in the separate **Carousel Dots** and **Carousel Arrows** sections. ## Position the device frame This is the part that catches people out, so it is worth doing before you judge the result. In the **Special Carousel** layout the device frame is a separate layer drawn over the slider, and **it is not lined up with the slides by default**. On a test page the frame rendered at roughly 330 × 582 pixels at the left edge of the widget while the slider was about 1360 × 552 and painted straight over it — so the result looked like a plain image slider with no phone around it. - The controls that place the frame are the mockup **width**, **height** and **offset** settings in **Style > Carousel Slide**, together with **Z-Index**.- They ship with **no default values**, which is why the frame starts out misplaced.- The right numbers depend on your slide size and the frame you picked, so set them by eye against your own slider: size the frame to the centred slide first, then nudge the offset until it sits over it.- We have not published tested values for this — see **Not verified**. If you need a mockup that simply works without this tuning, use the **Normal** layout instead: one device, one image, frame already in place. ## How It Behaves Measured on a page using the **Special Carousel** layout, **Mobile** type, five images in **Select Multiple Images**, with **Dots** and **Arrows** turned on: - **The slider initialises and loops.** Five images produced twelve slide nodes — the five real ones plus seven duplicates the slider creates to loop, which is **Infinite** doing its job at its default of Enable.- **Navigation appeared as configured.** Five dots, one per real image, and two arrows.- **Neighbouring slides show by default.** **Carousal Column** defaults to **Multiple**, so the slides on either side of the centred one are visible. Choose **Single Slide** if you want one at a time.- **The device frame was not over the slides.** With default settings the frame sat at the left edge, behind the slider, exactly as described above. ![The Special Carousel layout with five images, dots and arrows.](https://theplusaddons.com/wp-content/uploads/2026/09/dynamicdevice-result-carousel.webp) The front-end demo below shows the effect a fully positioned device slider is aiming for: ![device slider demo](https://theplusaddons.com/wp-content/uploads/2023/02/device-slider-demo.gif) ## Limitations - **There is no SmartWatch device in this widget, in either layout.** The **Special Carousel** layout offers **Mobile**, **Laptop**, **Desktop** and **Custom** only. **Tablet** exists in the **Normal** layout but not in the carousel. For a watch, or for a tablet slider, use **Custom** and supply your own frame image.- **In the Special Carousel layout the device frame is not placed over the slides on its own.** Out of the box the frame is drawn at the left edge of the widget at roughly 330 × 582 pixels while the slider itself is about 1360 × 552 and paints over it, so what you see is a plain image slider with no visible mockup. Lining the frame up with the centred slide is what the mockup width, height and offset controls in the **Carousel Slide** section are for, and they ship with no default values, so you have to dial them in by hand for your own slide size. We have not published tested numbers for this — see **Not verified** below.- **The carousel takes images only.** The **Content** dropdown, and with it the **Template** and **IFrame** content types, belongs to the **Normal** layout. A carousel slides through the gallery in **Select Multiple Images** and nothing else.- **A Custom mockup hides your content unless its screen area is transparent.** The frame image is drawn over the content, so an ordinary opaque JPEG shows only itself — the image, template or page behind it is completely invisible. Use a PNG with the screen cut out. Nothing in the editor warns you about this.- **Desktop has exactly one frame.** **Desktop Device** offers **iMac Minimal (1000px x 565px)** and nothing else, so there is no choice to make there. ## Not verified So you know exactly what has and has not been checked: - **Correcting the carousel frame placement.** The misplacement was measured, but the **Carousel Slide** width, height and offset values that would fix it were not worked out, so this doc does not give you numbers to copy.- **Autoplay, Autoplay Speed, Slide Speed, Infinite and Carousal Column were not toggled one at a time.** Only the shipped defaults, plus Dots and Arrows turned on, were rendered and measured.- **The carousel style sub-controls.** Slide Gap/Space, Slide Opacity, Slide Scale, and the dot and arrow colours, sizes and offsets were not exercised on the front end; only their labels are known.- **Responsive behaviour.** Nothing was measured at tablet or mobile breakpoints, and the responsive **Width Adjust(%)** and **Transition Duration** values were not exercised. ## Troubleshooting ### I see the images sliding but no device frame Expected with the shipped settings. The frame is drawn at the left edge of the widget and the slider paints over it. Open **Style > Carousel Slide** and set the mockup width, height and offset so the frame sits over the centred slide. ### There is no SmartWatch or Tablet in the Type control There is no SmartWatch frame in the widget at all, and **Tablet** is offered only in the **Normal** layout. In the carousel, choose **Custom** and upload your own frame image — a PNG with the screen area cut out. ### I cannot find the Carousel Options section Two reasons. It only appears when **Layout** is **Special Carousel**, and the panel spells it **Carousal Options**, with an *a*. ### Where are the dots and arrows? Both are set to **Disable** out of the box. Turn them on in **Style > Carousal Options**. ## Related Docs - [Dynamic Device Elementor Widget Settings Overview](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/)- [How to add website scrolling device mockup in Elementor?](https://theplusaddons.com/docs/website-scrolling-device-mockup-in-elementor/)- [How to create Website Portfolio/Showcase Page in Elementor?](https://theplusaddons.com/docs/create-website-portfolio-showcase-page-in-elementor/) ## Frequently Asked Questions **Q: Why is my device slider showing the images but no frame?** A: That usually happens with the shipped Special Carousel settings. The frame is drawn as a separate layer at the left edge of the widget, while the slider paints over it, so it looks like a plain image carousel. The fix is in Style > Carousel Slide, where the mockup width, height, and offset controls position the frame over the centred slide. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that layer setup in this layout. **Q: Can I use SmartWatch or Tablet as the device type in this slider?** A: SmartWatch is not available in this widget at all, and Tablet only exists in the Normal layout. In Special Carousel, the available types are Mobile, Laptop, Desktop, and Custom. For a watch or tablet-style mockup, Custom is the route because you supply your own frame image. A PNG with the screen cut out works best when you need the content to remain visible behind the frame. **Q: Why can’t I find the Carousel Options section?** A: That section only appears when Layout is set to Special Carousel. It is also spelled Carousal Options with an a, which is easy to miss if you are searching for Carousel. The same spelling shows up in Carousal Column too. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that naming consistently in this widget’s slider controls. **Q: How do I make the dots and arrows appear on a device slider?** A: Dots and Arrows are both disabled by default in Style > Carousal Options, so nothing shows until you turn them on. Once enabled, their styling lives in separate Carousel Dots and Carousel Arrows sections. Five images still produce five dots because each dot maps to a real image, even though Infinite can create extra slide nodes behind the scenes. **Q: What is the best way to build a tablet or watch mockup with this widget?** A: Custom is the practical choice for both tablet and watch-style layouts because Special Carousel does not include Tablet or SmartWatch frames. Upload your own frame image and use a PNG with transparent screen area so the content stays visible underneath. That matters because an opaque JPEG will cover whatever sits behind it completely. This is where [Dynamic Device Elementor Widget Settings Overview](https://theplusaddons.com/docs/dynamic-device-elementor-widget-settings-overview/) helps if you want to compare layouts. **Q: Should I use Special Carousel or Normal layout for a device mockup?** A: Special Carousel fits when you want multiple images sliding inside one device frame, but it needs manual frame positioning and only offers Mobile, Laptop, Desktop, and Custom. Normal layout is better when you want one device with one image and the frame already in place. If you want a setup that works without tuning width and offset values by eye, Normal is the safer pick for most pages.