Showcase slider type

You can select Showcase slider type at the Project creation.

Basic behavior

This slider type can show an odd number of slides next to each other. In the middle there's an active slide, where layer animations by, and where the links are clickable. If there's space, the before and after slides appear next to the active slide. Depending on the available space the appearing slides can be partial (=cropped). By default the other slides are just for navigation. You can browse the slides one by one.

Configuration

The Showcase slider has a bunch of new options which you can use to fine-tune your sliders.

General tab

You can find these options at the bottom of the Slider settings → General tab.

Side spacing

With the size spacing feature you can create a fix distance between the slider and the slides. You can use this space to place your controls, or even to add a title to your slider.

• Desktop: The distance between the slider and slides on desktop.
• Tablet: The distance between the slider and slides on tablet.
• Mobile: The distance between the slider and slides on mobile.

Size tab

You can find these options at of the Slider settings → Size tab.

Slide Size

Slide Width

The width of the slides in your Showcase slider.

Slide Height

The height of the slides in your Showcase slider.

Slide Distance

A fix distance between your slides

Animations tab

You can find these options at the Slider settings → Animations tab.

Showcase Animation

Preset

We made some pre-sets, which we think look good with this slider type. You can choose one of them.

Duration

The amount of time the animation takes to complete. The larger the value the more time it takes for the animation to finish. So basically, it's the speed of the animation

Easing

The pace of the animation. You can see them here.

Perspective

The slides of the showcase slider type are 3D elements, and they are shown from a distance, which is the perspective point. The best way to imagine it is as in real life, if you watch something from 1cm, it will look different from what you see from 1m.

Direction

Your slider can go two directions, sideways (horizontal) or up and down (vertical).

Opacity

The transparency of the previous, active and next slides.

Scale

It can scale the previous, active and next slides to the given value.

X

If you turn it on, this is how pushed away the previous, current and next slide will be in the X axis from their original position.

Y

If you turn it on, this is how pushed away the previous, current and next slide will be in the Y axis from their original position.

Z

If you turn it on, this is how pushed away the previous, current and next slide will be in the Z axis from their original position.

Rotate X

If you turn it on, the previous, current and next slide will rotate this much around the X axis.

Rotate Y

If you turn it on, the previous, current and next slide will rotate this much around the Y axis.

Rotate Z

If you turn it on, the previous, current and next slide will rotate this much around the Z axis.

Carousel

Your slider can either have a beginning and an end, or it can be a carousel, meaning that after the last slide the first will come. If you turn off the carousel, the left arrow will disappear on the first slide, and the right arrow will disappear on the last slide. Also the autoplay will stop at the last slide.

Carousel on (the last slide(s) are visible on the left side of the first slide)	Carousel off (there are no other slide(s) on the left side of the first slide)

Switch with next/previous slides

By default, when you click on the next/previous slides there's a slide switching action to make that slide the active slide. You can disable that behavior by turning off this setting.

Slides tab

You can find these options at of the Slider settings → Slides tab.

Slide border width

You can set the width of the border that'll be applied to all slides.

Slide border color

You can set the color of the border. This option only displays if the Slide border width value is greater than 0.

Slide border radius

You can set the border radius of the slides.

Frequently Asked Questions

How can I have the number of slides I want?

The Showcase slider type calculates the amount of visible slides based on the current slider's slider size - width , Slide size - width and Slide distance .

For example, if your slider is 1200px wide, your slides are 400x400px and you have 0px slide distance, you will see 3 full slides. Above 1200px you'll see a new slide appearing on the left and right sides. If you reduce the size of the slider, until 400px you'll see slides disappearing from the sides, until the only active slide remains. Below 400px the single remaining slide will start resizing to fit into the browser.

So, the more slides you want to display, the smaller Slide Size you can have, otherwise the more slides won't be able to fit into the slider.

On mobile you can show or increase the size of the visible portion before and after slides by setting a mobile Side Spacing.

How to create a dark overlay for the not active slides?

You can create a dark overlay effect by following the steps below.

1. Add a background color to your slider at the Slider settings → General tab → Slider Design

   

2. Go to the Slider settings → Animations tab. Turn on the Opacity and adjust the Before and After values.

   

Can I have differently sized slides?

No, you can't. Our showcase slider because of it's system can only have the same slide sizes, so with different ratio images the only options you have is the fill mode options, that you can either make your images to cover the whole slide with the Slide background image fill option, or you can make them show the whole image with the "fit" option, but that leaves empty spaces around these images.

How to create a header for the slider?

You can create a header for your slider in two ways

1. Using a Static overlay
2. Creating a Block type slider and publishing it above your Showcase slider

You can create a header for your slider by creating a Static Overlay. Then put the heading you want to have above the slider on this Static Overlay.

Alternatively, you could just create a Block type slider for your heading, what you should put in front of the showcase slider.

How to set the 2nd, 3rd, etc. slides to be in the center on slider loading?

On your slide list, at any of your slides you can choose Set as first. That will make your selected slide to be in the center on slider loading, while the order you have on the slide list will be how your slides will appear after each other.

First:

Result:

How to make the Showcase slider have a full carousel?

The Showcase slider type works that way that you need to have a certain number of slides in order to have a full carousel. This number depends on the slider and slide size and the amount of slides that are visible together so it's different for every slider.

Generally, a slider can appear as a full carousel on fullHD screens if the slide size is minimum 800px and the slider contains at least 5 slides.

If you don't plan to have more slides in your slider you could duplicate them which usually helps getting enough slides for a full carousel.