Slider type - Simple - Background animation, Ken Burns effect

You can find this at the slider's settings.

In this documentation

This is the traditional slider type. There is only one slide visible at once, and it is as big as the slider.

Demo sliders

Would you like to see some example on how Simple type sliders are look like in a real site? Check out these demo sliders:

Animation settings

Main Animation

You can choose a basic animation to switch your slides with.

Main Animation Properties
  • Duration - This is how long it will take for your slider to switch from one slide to another.
  • Delay Expert - This is how much your slide will wait before switching.
  • Easing Expert - The pace of the animation. You can see them here.
  • Parallax Expert - It's a special setting. Maybe the best way to describe it is that it's the timing of the animations, if you give a number between 0 and 1, the first switching animation will be going out, when the next one has already started. (This is not the nowadays called "parallax" effect, if you want that, you can turn that on at your layers or at the Slide background image fill. Check out the sliders and video here to better understand this, and all available parallax effects.)
Background animation

You can choose to animate your background images instead of the basic switching animation. If you turn this option on, the Animation you have chosen two settings higher will be applied to the items in your slides. Speed is how fast it will happen.

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.

If you open up the animations window, you can select a Background animation set in the top left, and pick animations under it by selecting them with checkboxes. You can select the checkboxes from multiple sets too. If you have got them, click on Set.

Ken Burns effect

It's a kind of background animation, but the Ken Burns effect is a special effect, what you can customize a little bit.

Open up the animations window, select a Ken burns effect set in the top left, and pick the Ken Burns effects you want to use. You can select with the checkboxes from multiple sets too. If you click on the image, you can change the focus point to where you are clicking, or you can add this point manually. Click on Set, when you are done.

Speed is how fast the effect will be, and strength is how much bigger/smaller your image can get from it's original size.

(Don't use too big images, because Internet Explorer's image resizing will make the animation look choppy. The image should have about the size of your slider.)

Demo sliders

Would you like to see some example on how the ken burns effect looks like on real sliders? Check out the second slide on this demo slider:

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.

Simple slider type settings Expert

Slider background image Expert
  • Image - You can choose an image, which will be always in the background of your slider while your slides are moving in front of it.
  • Fixed - With this option turned on, your image will be in a fixed position, even when you scroll in your browser's window. (There is a limitation, that on tablets and mobile phones it won't be fixed, because a lot of phones and tablets doesn't handle this well.)
  • Size - The size of the background image. This can be any background-size CSS code value.
Demo sliders

Would you like to see some example on how the fixed background looks like on real sliders? Check out these demo sliders:

Slider background video Expert

You can choose to show a video from your FTP to be your slide's background, just write the link of your video here (example: http://www.w3schools.com/tags/movie.mp4). There are three file extension inputs (mp4, webm and ogg) to have fallbacks, because not all browsers are supporting all of them, you can see them here.

  • Mute - Turn on or off the volume.
  • Loop - Make your video start again after it's finished
  • Fill mode
    • Fill: The video will cover the whole slide.
    • Fit: The whole video will be on the slide in the center.
    • Center: The video with its original size will be on the slide in the center.
Dynamic height Expert

If you have background images with different ratios, and you don't want them to adjust to the slider's size, but you rather want the slider's size to adjust to them, use this option.

Demo sliders

Would you like to see some example on how the dynamic height looks like on real sliders? Check out this demo slider:

Padding Expert

A padding value around the whole slider.

Border Expert

Border around the slider. If you will use border radius, you will need to add this css code at the next option, to make it work properly:

overflow:hidden;
z-index:2;
Slider CSSExpert

You can give any CSS code, which will be applied to the slider. There are some presets, what you can check out. Usually the box-shadows what you can see on the demo sliders are added here.

Slide CSSExpert

You can give any CSS code, which will be applied to the slides.

Loop single slide Expert

If you only have one slide, and you want to repeat it, turn this option on, also enable and start the autoplay, because this option only works this way. This will look as if you have the same slide twice, so probably don't use Controls, which are showing that.

Slide animation settings

These options can be found in the slide editor.
Background animation

You have an option to pick a background animation, which will be only on your current slide. If you use this option, the Slider settings → Slider type → Simple type → Ken Burns effect and Background animation, which is a selection for all slides, won't be applied to this slide anymore.

Ken Burns effect

You have an option to pick a Ken Burns effect, which will be only on your current slide. If you use this option, the Slider settings → Slider type → Simple type → Ken Burns effect and Background animation, which is a selection for all slides, won't be applied to this slide anymore.

(Don't use too big images, because Internet Explorer's image resizing will make the animation look choppy. The image should have about the size of your slider.)