Showcase slider type
In this article
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. By default the other slides are just for navigation. You can browse the slides one by one.
The Showcase slider has a bunch of new options which you can use to fine-tune your sliders.
You can find these options at the bottom of the Slider settings → General tab.
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.
You can find these options at of the Slider settings → Size tab.
The width of the slides in your Showcase slider.
The height of the slides in your Showcase slider.
A fix distance between your slides
You can find these options at of the Slider settings → Animations tab.
We made some pre-sets, which we think look good with this slider type. You can choose one of them.
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
The pace of the animation. You can see them here.
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.
Your slider can go two directions, sideways (horizontal) or up and down (vertical).
The transparency of the previous, active and next slides.
It can scale the previous, active and next slides to the given value.
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.
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.
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.
If you turn it on, the previous, current and next slide will rotate this much around the X axis.
If you turn it on, the previous, current and next slide will rotate this much around the Y axis.
If you turn it on, the previous, current and next slide will rotate this much around the Z axis.
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.
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.
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 - widthand
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.
How to create a dark overlay for the not active slides?
You can create a dark overlay effect by following the steps below.
Add a background color to your slider at the Slider settings → General tab → Slider Design
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 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.