Simple slider type

Animation settings

This is the most universal slider type in our types. This is why most of our sliders on our demo site are using this slider type. You can customize every part of this slider type from the backend and also comes with a very popular background animations (like skitter animations).

simpletype

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.

Border

The border around the slider.

Border radius

It results rounded corners on the slider.

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.

Animation settings

Animation

This defines how the slides are switching from one to another. Fade example, Horizontal example, Vertical example.

Properties

These animation properties are applied to the previous animations. Parallax used by horizontal and vertical mode, it defines the pulling distance (100% = 1; 45% = 0.45).
Parallax demo.

Background animation

Cool 2d and 3d animations, which are applies only the background images. Lot of other sliders name this feature as skitter, flex, etc…

Background animation example.