Special Showcase slider

☝️ Note: This tutorial is for Smart Slider 3 Pro version only!

This slider is great for your portfolio.

1

Creating the slider

First you should create a new Showcase slider. Smart Slider asks for slider and slide dimensions, but let's ignore that now and create the slider with the default dimensions.

Once your slider is done, you should add a couple of slides.

2

Setting the Slider size

You'll need to set the size of the slider and slides based on the image you want to use to display the slides under. I use this image. It's dimensions are 1025x576px, so I'll use this as the slider size.

3

Setting the Slide size

You need the slides to be as big as the "empty" area is in the image, as that's where they'll appear. For the laptop image I'm using 720x490px size is good. If you use a different image, make sure you measure the size of the empty area and use those values.

Once you have the correct image size, change the slide size at the Slider settings → Size tab.

4

Creating a Static Overlay

Once the slider and slide sizes are set, create a new Static Overlay. Go into it's slide editor and add an absolute image layer where you select the laptop image. Make sure it's in the middle of the slide and has 1025x576px size.

5

Setting the Side Spacing

At this point your slider should look ready. The last step is setting the Side Spacing to create distance between the slider and slides. Measure the following distances on your image:

the distance between the top of the image and the start of the empty content area
the distance between the right side of the image and the start of the empty content area
the distance between the bottom of the image and the start of the empty content area
the distance between the left side of the image and the start of the empty content area

Then type in these values into the Side Spacing - Desktop field in the same order as above.

The Desktop values are probably good for Tablet, but you should adjust them for Mobile.