Showcase slider type

In this article

☝️ Note: This slider type is only available in the Pro version of Smart Slider 3.

Basic behavior

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.

Configuration

The Showcase slider has a bunch of new options which you can use to fine-tune your sliders.

Size tab

You can find these options at of the Slider settings → Size tab.

Slide Size

Slide Width

The width of the slides in your Showcase slider.

Slide Height

The height of the slides in your Showcase slider.

Slide Distance

A fix distance between your slides

Animations tab

You can find these options at of the Slider settings → Animations tab.

Showcase Animation

Preset

We made some pre-sets, which we think look good with this slider type. You can choose one of them.

Duration

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

☝️ Note: Looking for the Autoplay feature? Find it at the Autoplay tab.
Easing

The pace of the animation. You can see them here.

Perspective

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.

Direction

Your slider can go two directions, sideways (horizontal) or up and down (vertical).

Opacity

The transparency of the previous, active and next slides.

Scale

It can scale the previous, active and next slides to the given value.

X

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

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

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

If you turn it on, the previous, current and next slide will rotate this much around the X axis.

⚠️ Warning: 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

If you turn it on, the previous, current and next slide will rotate this much around the Y axis.

⚠️ Warning: 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

If you turn it on, the previous, current and next slide will rotate this much around the Z axis.

Carousel

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

1
How can I set up my Showcase slider with the best responsive behavior?

Make sure the Slide size and Slider size match.

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.

  1. Set the slider size

    Go to the Slider settings → Size tab and set your slider size to be 300x400px.

  2. Set the slide size

    Go to the Slider settings → Size tab and set your slide size to be 300x400px.

  3. Set the slider's layout

    Go to the Slider settings → Size tab, scroll down and select the Full width layout.

☝️ Note: You can use the Boxed layout as well, just make sure the Upscale is turned on!

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.

2
How can I have the number of slides I want?

The Showcase slider type calculates the amount of visible slides based on the Slider size, Slide size and Slide distance.

For example, if your slider size is 1200x400px, your slides are 400x400px and you have 20px slide distance, you will always see 3 full slides. Above 1200px you'll see a new slide appearing on the left and right sides.

3
How to create a dark overlay for the not active slides?

You can create a dark overlay effect by following the steps below.

  1. Add a background color to your slider at the Slider settings → General tab → Slider Design

  2. Go to the Slider settings → Animations tab. Turn on the Opacity and adjust the Before and After values.

4
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 Slider 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.

5

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.