Slider type - Showcase
With this slider type you can have more slides in your slider together. The switching will switch one slide a once.
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.
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.
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.
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.
Limitation: Firefox and IE Edge is handling rotations as if you rotate an element "behind the screen", it will put it behind the clickable area. Because of this when you turn on this option, we have to put new divs to the left and right side of the active slide, which is reaching the edges of your slider, and clicking on these will switch to the previous or next slide. This is fine, if you only have one visible slide to the left and to the right, but if you have multiple visible slides, clicking to the left or right over any slide will only cause one slide switching towards that direction.
Rotate Y Expert
If you turn it on, the previous, current and next slide will rotate this much around the Y axis.
Limitation: Firefox and IE Edge is handling rotations as if you rotate an element "behind the screen", it will put it behind the clickable area. Because of this when you turn on this option, we have to put new divs to the left and right side of the active slide, which is reaching the edges of your slider, and clicking on these will switch to the previous or next slide. This is fine, if you only have one visible slide to the left and to the right, but if you have multiple visible slides, clicking to the left or right over any slide will only cause one slide switching towards that direction.
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
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;
}
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.