Slider settings

Slider settings are not just a single page configuration as it consists of 3 different parts. The first part is the basic/common slider settings, second is the slider type settings and the third is the widgets. Also widgets are grouped into different views. This documentation will describe the common settings of a slider.

Slider settings



It helps you to find the slider in the future.

Slider size

Width and height are the dimension of the slider. If canvas size is off, the slider will fit exactly to this dimension, it won’t be bigger. f canvas size is on, then the defined dimension is the size of the slide and the slider size will be calculated depending on the other settings/count of the slides etc… So in this case the slider will be bigger than the defined width and height. Here is the different betweend the slider and the canvas size:


Responsive mode

  • Down scale: If the container element of Smart Slider is smaller than the Smart Slider, it will scale down the content of the slider to be in the perfect size.
  • Up scale: If the container element of Smart Slider is bigger than the Smart Slider, it will scale up the content of the slider to be in the perfect size.

Responsive mode

Global font size

Every font size is defined in percent in the global font manager. This helps Smart Slider to scale the fonts well in responsive mode. This defined font in pixel means the 100% font size. If responsive scale down and scale up changes, this font size will change as well. If you are using responsive mode, then you can add bigger fonts for the Tablet and Mobile sizes, so the percentige wouldn’t go too low.


The “empty” area around Smart Slider from the different sides. In responsive mode, this area is scaling up and down in responsive mode. Also you can create place for widgets with this parameter


This slider type defines how the slider will shown on the frontend. Here you can define the types and if you click on the configure button, you will be able to define color, sizes etc… Every slider type has different parameters.
Currently these slider types are available:


  • on load: After the images loaded on the slider, the slider fades in smoothly. If you turn on the Up scale mode and you experience flickering, then it can solve the problem.
  • on scroll: If you turn this parameter on, then if you scroll down on your site, then it will fade in your slider.

Play animation on first load

This parameter set when the slider loads up whether to place the first layer in animation or not. Here is an example, which play the animation on the first load.

Play out animations

When slider changes to another slide, it will place the current slide out animation before it changing to the next slide. If it is disable, then the slider will be more reactive. The last slide (ship) of this slider play this animation.

Play layer in after main animation finished

If disabled, then the layer in animation start parallel with the main animation. If enabled, the layer in animation will wait for the finish of the main animation.


Here you can define, which input actions can trigger the slider to switch slide.

Block right click

If you turn this toggle on, then the clicking with the right button is inefficient.

Image Load

There are three image loading options:

  • Normal: The images will load defaultly, as the website loads them.
  • Delayed load: The images will load after everything else finished the loading in the website, so you don’t have to wait for them to see the other content.
  • Lazy load: You can set up how many images you want to load, and when you go to the next or the previous slide, then plus one image will load from that end, if it’s not already loaded.

Lazy load
There is a Load neighbor option at the lazy load. If it’s on the default 0, then the slider will only load the currently watched slide’s images, then when you go to the next slide, it will load his image, until you have seen all slides, and all images are loaded. If you set it to more then 0, then it will load plus that many images from the previous and next slides counting from the current slide.

  • Example 1 current slide loaded slides not yet loaded slides
  • Load neighbor: 1
  • Slide number: 5
  • First slide: 1

1 2 3 4 5
Next slide comes:
1 2 3 4 5
3rd slide comes:
1 2 3 4 5

  • Example 2
  • Load neighbor: 2
  • Slide number: 10
  • First slide: 5

1 2 3 4 5 6 7 8 9 10
Go back one:
1 2 3 4 5 6 7 8 9 10
Go to the 6th slide:
1 2 3 4 5 6 7 8 9 10
Go to the 8th slide:
1 2 3 4 5 6 7 8 9 10
Go to the 9th slide:
1 2 3 4 5 6 7 8 9 10



Resize slide backgrounds

The slider is making new images from the picked background, so they would have the optimized size. Here you can pick what image size you would like to be generated.

  • Disabled: it doesn’t generate a new image, but it will use the basic one. The image will have 100% width, and auto height, and it will be align to the top.
  • Cover mode: the image will be as big, as it has to be to cover the whole slide.
  • Contain mode: the image will have 100% width, and auto height. This image will be aligned in the center.

Note: the background color for the Contain mode only can have opacity, if the background image has png extension.
Note #2: the cover and contain mode is only working for desktop images with the Device specific images.

Randomize slides

With this parameter you can randomize the slides in your slider

Autoplay settings


Autoplay is a timer, which switch between slides when the autoplay duration expired.


Here you can enable the autoplay and set the timer duration.

In additional, you can also set whether you want the slider to finish after a given number of loops, showed slides, and to stop at which part of the sequence (at last slide or at the next slide).

It is also possible to set if the autoplay should stop at a click event, when the mouse enters its area, or at an inside playing process (like video playing).

Autoplay can be resumed, too. You can define if you want Smart Slider to resume when the mouse cursor leaves the slider, or after ain inside playing process (like video playing).



There are several groups in widgets, which make your slider fancier. The following groups are available:

Slide ordering

If you click on the line icon before the slides and you let the mouse click pressed, then you can order the slides.