Slider type - Showcase
Turn on the Expert mode to see the slider type selection!
Check out this documentation to know how to set up your Showcase slider type with the best responsive behavior. If you are wondering what's the difference between the Showcase's and Carousel's responsive behavior, check out this documentation.
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 Visible slides number should be the maximum number of slides, what you can see together during the whole switching animation. For example if you show 3 slides, when you switch, 4 is visible together, as the first one is moving out and the 4th one is coming in.
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.