Showcase slider type
Slider type settings
- Canvas size
- Background image
- Background size
- Responsive maximum slide width
- Choose a CSS design
- Slide skin
- Slide CSS
- Predefined animations
- Slide distance
- X, Y, Z
- Rotate X, Y, Z
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
The size of the individual slides (not the slider).
This will be the the background of the slider. This image isn’t moving when slides are changing. Demo example for fixed background.
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.
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).
Choose a CSS design
Some predefined inline CSS listed here, for example shadows or the white photo border.
You can add any valid inline CSS here, which applies to the main slider element.
Some predefined inline CSS listed here, light shadow or border radius.
You can add any valid inline CSS here, which applies to the slides.
You can choose some predefined animation, which will change the animation settings.
The Duration, Delay and the Easing of the sliding animation.
You can choose Horizontal or Vertical direction for the sliding.
The distance between the slides.
This is the perspective from where the slide is viewed. For more information check out W3 Schools.
If it’s turned on, then the opacity of the previous, current and the next slide will be the given percentige.
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.
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