Slider type - Showcase
With this slider type you can have more slides in your slider together. The switching will switch one slide a once.
In this documentation
- Showcase Slider type settings
- Animation settings
- Frequently asked questions
- Where can I change my slider type to Showcase?
- How can I set up my Showcase slider with the best responsive behavior?
- What's the difference between the Showcase and Carousel slider's responsive behavior?
- How does the Showcase slider work?
- How can I add border around the slides?
- How can I have the number of slides I want?
- What size settings are affecting the different parts of a Showcase slider?
Demo sliders
Would you like to see some example on how the Showcase type sliders are look like on a real site? Check out these demo sliders.
Showcase Slider type settings
Slider background image
- Image - You can choose an image, which will always be in the background of your slider while your slides are moving in front of it.
- Fixed - With this option turned on, your image will be in a fix position, even when you scroll in your browser's window.
- Size - The size of the background image. This can be any background-size css code value.
Slider background color 3.3.12
You can set a slider background color.
Slide size
Showcase slider types have two sizes, one is the size of the whole slider, and the other is this, the size of the slides. You will want to adjust those two sizes together, for example if you want your slides next to each other with the same height, your slider's height will be the same as your slides' height, and the slider's width will be bigger than your slides' width.
Border Expert
Border around the whole slider.
Switch with next/previous slides 3.3.12Expert
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.
Slider Expert
You can give any css code, which will be applied to the whole slider. There are some pre-sets, what you can check out.
Slide Expert
You can give any css code, which will be applied to the slides. There are some pre-sets, what you can check out.
Animation settings
Preset
We made some pre-sets, which we think look good with this slider type. You can choose one of them.
Properties
- Duration - This is how long it will take your slider to switch from one slide to another.
- Delay Expert - This is how much the sliding will wait.
- Easing Expert - The pace of the animation. You can see them here.
Carousel
If you have enough slides, you can turn it into a carousel. The amount of slides you need to have to create a perfect carousel depends on your slider's and slides' size!
Direction
Your slider can go two directions, sideways (horizontal) or up and down (vertical).
Slide distance
The distance between your slides, for example if you set it to 0, they will touch each other.
Perspective Expert
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.
Opacity Expert
If you turn it on, this is how transparent the previous, current and next slide will be.
Scale Expert
If you turn it on, this is how much bigger the previous, current and next slide will be based on their original sizes.
X Expert
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 Expert
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 Expert
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 Expert
If you turn it on, the previous, current and next slide will rotate this much around the X axis.
Rotate Y Expert
If you turn it on, the previous, current and next slide will rotate this much around the Y axis.
Rotate Z Expert
If you turn it on, the previous, current and next slide will rotate this much around the Z axis.
Frequently Asked Questions
- 1
-
Where can I change my slider type to Showcase?
Go to the Slider settings → General tab.
- 2
-
How can I set up my Showcase slider with the best responsive behavior?
Check out this documentation to know how to set up your Showcase slider type with the best responsive behavior.
- 3
-
What's the difference between the Showcase and Carousel slider's responsive behavior?
If you are wondering what's the difference between the Showcase's and Carousel's responsive behavior, check out this documentation.
- 4
-
How does the Showcase slider work?
The Showcase slider works that way that it shows an odd number of slides. The active slide (where the layer animations play and the links can be clicked) is in the middle. The rest of the slides are for navigation only. When clicked, they switch to be the "active" slide.
- 5
-
How can I add border around the slides?
We don't have an option for this, because the border changes the calculations a little bit, but in almost all cases it wouldn't matter, so you could try to use this CSS code in the CSS field of your slider:
.n2-ss-showcase-slides .n2-ss-slide{ border: 5px solid white!important; box-sizing: border-box!important; } .n2-ss-showcase-slides{ overflow: visible!important; }
If you only need this at a specific slider on your page, you could use its ID number to identify it. For example here 284 is the ID of my slider:#n2-ss-284 .n2-ss-showcase-slides .n2-ss-slide{ border: 5px solid white!important; box-sizing: border-box!important; } #n2-ss-284 .n2-ss-showcase-slides{ overflow: visible!important; }
- 6
-
How can I have the number of slides I want?
The Showcase slider shows the slides based on:
Slider size (width value)
Slide size (width value)
So the number of slides is given by how many slides + slide distances can fit into the slider size. For example 1200px slider size width with 300px slide size width and 0px slide distance will show 4 slides.
- 7
-
What size settings are affecting the different parts of a Showcase slider?
A Showcase slider is created by two parts, the slider and the slide. Slider is the entire part:
This is affected by all the settings you can find on a Size tab.
While the slide is the smaller part:
The slides are affected by the Slide size value and also content editing mode can make the slides bigger if necessary. The animation settings can also modify the size of the slides, for example "scale" can make them smaller.