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.
Frequently Asked Questions
How can I set up my Showcase slider with the best responsive behavior?
Make sure the
Slider size 1920x600 940x540 Slide size 940x540 940x540 Mobile result
Let's see an example with images! I'll be using a slider which has 300x400px size, but you can use any size you want.
- Set the slider size
Go to the Slider settings → Size tab and set your slider size to be 300x400px.
- Set the slide size
Go to the Slider settings → Size tab and set your slide size to be 300x400px.
- Set the slider's layout
Go to the Slider settings → Size tab, scroll down and select the Full width layout.
- Set the slider size
Configure the slider to your liking and add your content.
If you check the slider in your browser, you will see that the slides fill the whole browser. And when you reduce the browser width, the slides won't start shrinking but you will see less of them.
How can I have the number of slides I want?
The Showcase slider type calculates the amount of visible slides based on the
For example, if your slider size is 1200x400px, your slides are 400x400px and you have 0px slide distance, you will always see 3 full slides. Above 1200px you'll see a new slide appearing on the left and right sides.
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.