Slider type - Showcase

This slider type is only available in the Pro version.
You should follow this documentation to setup your Showcase slider with the best responsive behavior!

With this slider type you can have more slides in your slider together. The switching will switch one slide a once.

Turn on the Expert mode to see the slider type selection!

In this documentation

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.

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.

The scale option can distort the Slide distance's result, as it uses CSS scaling. You can try moving the slides closer with the X option.
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

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

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)

Slide distance

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.

Related Articles