Simple slider type

You can select Simple slider type at the Project creation.

Basic behavior

The Simple slider type is what people commonly known as slider. It displays one slide at a time, which always has the same size as the slider.

Configuration

The Simple slider type adds a bunch of new options to your slider.

Animation tab

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

Main Animation

The Main animation is a basic animation which can move both the slide backgrounds and layers.

The Main Animation affects:

Main Animation

The direction of the Main animation.

  • No animation: The slides change without animation.

    Note: due to browser issues, you cannot have a truly 0MS main animation. So with this option 100MS fade animation will be used.

  • Fade: The current slide fades out and reveals the next one behind.
  • Crossfade: The current slide fades out and at the same time the next one fades in.
  • Horizontal: The current slide moves to the left and the next one comes in from the right.
  • Vertical: The current slide moves upwards and the next one comes in from below.
  • Horizontal - reversed: The current slide moves to the right and the next one comes in from the left. This direction is available at the Simple slider type only.
  • Vertical - reversed: The current slide moves downwards and the next one comes in from above. This direction is available at the Simple slider type only.
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.

Delay - Pro

The slide will wait the given amount of time before moves away when the slide switching action is fired. For example, if you set it to 2000MS (which is 2 seconds) then the slide switching won't start for 2 seconds after an arrow was pressed.

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

Easing - Pro

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

Carousel - Pro

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.

Background Animation

Background Animation

☝️ Note: The Background animation can also be set for each slide at Slide → Content tab → under Animations.

Background animations can move the slide background images and colors. They have no effect on slide background videos or layers.

⚠️ Warning: Background Animations have the following limitations:

  • The Morph and Distortion animations only work on images which have Fill selected at their Fill mode either Slider settings → Slides or at the Slide.
  • They're disabled if the Background parallax is enabled.
  • Some background animations don't work properly with a gradient overlay.
  • Many background animations don't look properly with the Ken Burns effect. If you want to use both, make sure you pick an animation that looks good with it.
Speed

The speed of the background animation.

Shifted - Pro

Shifted is the option deciding, when the Background animation should be played, since your layers are moving out with the basic animation, these two animations are separate, and you can choose to make your background animation wait for the layers or to not to wait for the layers, so it would happen together or "auto" means, that if your slide has layers on it, the background animation will wait, and if you don't, the animation won't wait, because if it would be just turned on, it could wait too much on the slides not having layers on them.

Ken Burns effect - Pro

You can enhance your slide background images with a cool zooming and panning Ken Burns effect.

☝️ Note: The Ken Burns Effect needs even the still image to be scaled up a little bit. This means that your selected background images will be cropped from the sides.

Speed - Pro

Defines how fast the effect will be.

Strength - Pro

Defines how much bigger/smaller your image can get from it's original size.

Slides tab

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

Slide CSS - Pro

You can give any CSS code, which will be applied to the slides. Write the codes without selector. For example:

background-color: white;

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