Slider tutorial - Special showcase slider

This slider is great for your portfolio.

Creating the slider

First you should create a new showcase slider. At this point, the slider size doesn't really matter.

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

Creating a static slide

Our layout needs a png image with a laptop on it. I'll use this image, you can use something else. What matters for this second step is the actual size of the image. The image I'm using is 1025x576px. So before I could create my static slide, I'll need to change the size of my slider to be 1025x576px.

The slider size can be changed at the Slider settings → Size tab.

Once the slider and image sizes match, create a new static slide. Put down an image layer in canvas mode and make it 1025x576px.

Setting the slide size

This step is a bit more complex than the previous ones. You'll need to figure out the slide size by looking at the "empty" area of the laptop's monitor. For the laptop image I'm using 720x490px size is good, but this varies depending on the image you are using.

Once you have the correct image size, change the slide size at the Slider settings → General tab → under Showcase slider type → Slide size.

Maximum slider height

Most of the settings you can make your slider are pretty much depend on your design choices, except this one. You should set up a maximum slider height for your slider, and this should be the height of the slider. So let's head back to the Slider settings → Size tab and grab the slider height. Then scroll downwards and find the "Responsive - [your responsive mode]" section. Look for a Slider height setting, and put the copied slider height there.