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.
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 (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.
| 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 front-end demo below shows the effect a fully positioned device slider is aiming for:
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.
