How to have a device image where the screen's image changes?

This tutorial will show you how to have a laptop/tablet/mobile image on your slider, where the image is being replaced.

Step 1

Create a slider, then at the Add slide button create a Static Overlay.

Step 2

In absolute position put down an image layer. Use this image layer to display your laptop, tablet or mobile device image.

Step 3

At the Add slide button create a Blank slide.

Step 4

In absolute position put down an image area layer. This image should hold the image you would like to see on your device's screen.

Position this layer to cover the device's screen. You should leave it a little bit bigger from the actual screen size, because in absolute position the result cannot be pixel perfect.

Step 5

Repeat step 3 and 4 as many times, as many images you would like to show.

Step 6

Go to your slider's settings -> Animations tab and change the Main animation to Fade. This is required for this design to work, unless at step 2 you made your device's image to be as big as your slide is.

Step 7

Go to your slider's settings -> Developer tab, where you should write this CSS code:

#n2-ss-3539.n2-ss-slider .n2-ss-static-slide{
  z-index: 19;
}

just replace the 3539 number with your slider's ID number. This will put your static overlay behind the other slides' layers.

And you are done. If you would like to, you can add a background to the entire slider, or to each slide.