Showcase slider type

Slider type settings

Animation settings

With this slider type you can make a list of your slides with a beginning and an end. They can’t be connected like a carousel, when it goes to the last slide, it has to flip over the slides to go to the beginning again. Check out this demo to see an example.

Slider type settings

showcase_settings

Canvas size

The size of the individual slides (not the slider).

Background image

This will be the the background of the slider. This image isn’t moving when slides are changing. Demo example for fixed background.

Background size

This is a CCS3 property, which can be used to “resize” the background image. For example with responsive mode, you should write here: 100% 100%
You can read more on this property at W3 schools.

Padding

The inner distance of the slide canvas from the slider 4 sides. For example the laptop on this demo is a background image and we adjust the slide canvas into the screen with padding values.

Responsive maximum slide width

This value only applies when responsive scale up or down is enabled. This value defines the maximum slide canvas width, so if the screen is bigger and the slider should scale up, the scale will stop after the canvas reaches this width. This demo slider uses this feature with the value 1120px. It means that if you have bigger screen size than 1120px, then you will see the same slide as a user with 1120px screen size, the content doesn’t scale up (the slide background still scales up to fill up the area).
Responsive max width

Choose a CSS design

Some predefined inline CSS listed here, for example shadows or the white photo border.

CSS

You can add any valid inline CSS here, which applies to the main slider element.

Slide Skin

Some predefined inline CSS listed here, light shadow or border radius.

Slide CSS

You can add any valid inline CSS here, which applies to the slides.

Animation settings

showcase_animation

Predefined animations

You can choose some predefined animation, which will change the animation settings.

Properties

The Duration, Delay and the Easing of the sliding animation.

Direction

You can choose Horizontal or Vertical direction for the sliding.

Slide distance

The distance between the slides.

Perspective

This is the perspective from where the slide is viewed. For more information check out W3 Schools.

Opacity

If it’s turned on, then the opacity of the previous, current and the next slide will be the given percentige.

Scale

Here you can change the size of the previous, current and the next slides. The base is the canvas size.

X, Y, Z

You can modify the position of the slides on their x,y and z axis.

Rotate X, Y, Z

The rotation of the slides in x,y and z direction.

Order of the slides

You can pick, which slide do you want to load in the middle first by choosing it with the “Set as first” icon, which is the little star.
star
center
And you can order your slides the same way, as you can do it at the other slide types, by simply drag ‘n dropping the slides with the help of the line icons

button