Slider settings - General

The General tab is located at the Slider settings page.

Publish

There are many options to publish your slider, and you can find most of them here. Learn more about publishing your slider.

General

☝️ Note: The type of your slider is written next to the General label. E.g. if you use the Showcase slider type, the section is labeled as "General - Showcase Slider".

Name

The name of your slider. It's important to give unique names, because probably you will create many sliders, and after a while, it's not that easy to find, which one which.

Thumbnail

The thumbnail of the slider which shows up at the Dashboard. It's not used anywhere else.

ARIA label

The aria-label attribute is used to define a string that labels the current element.

Alias

The slider alias you can use in WordPress for the shortcode/PHP code to publish the slider.

Use as anchor

The alias will be used to create an element with the alias as it's ID. This way you'll be able to use this alias as an HTML anchor link. If you use the alias "homepage-slider" then you can use the anchor as #homepage-slider

In your own HTML:

<a href="#homepage-slider">Go to slider</a>

Within Smart Slider at any Link:

If you are using Divi theme, read this documention, as by default our code is not compatible with Divi.

Smooth scroll

By default browsers are just jumping to anchors. With this option you can smooth scroll to the slider. It adds scroll-behavior: smooth; to the HTML tag of your page.

Switch slide

You can use the anchor to switch to a selected slide by writing the slide number after the anchor, like this: #homepage-slider-2, which will switch to the second slide of the slider.

This documention could also help understanding this feature.

Scroll to slide

You can make the page scroll to the slider when you use the Switch Slide option.

Slider design

Slider background image Pro

This option allows you to set a background image for the slider, which will be behind all slides. This means, the slider background is only visible, if your slides don't have background.

Fixed Pro

Enables the Parallax effect on the slider background.

☝️ Note: This option is only visible if there's a background image set!
The fixed background doesn't work on sliders where the Force full width is enabled due to browser limitations!

Size Pro

Sets the background size of the slider background.

☝️ Note: This option is only visible if there's a background image set!

Background color Pro

This option allows you to set a background color for the slider, which will be behind all slides.

☝️ Note: This option is only visible if there's a background image set!

Background video Pro

You can set a background video for the whole slider, which will be behind all slides.

Muted Pro

You can mute the video. It's recommended that you leave the video muted, otherwise the video will not play in most browsers.

Loop Pro

Repeats the video forever.

Fill mode Pro

Adjusts how the video fills the slider.

Fill: the video fills the slider, and if there are size difference, the video is cropped
Fit: the video fits into the slider, without getting cropped.
Center: the video is in the middle of the slider, without ever resizing.

Align

You might not want our slider to have 100% width to fill its container, and in this case you can choose to put your slider into the left, center or right position. This only works, if you use the Boxed layout, with the Upscale turned off.

☝️ Note: The place where you put the slider will still take up the whole 100% space, only the slider will align itself inside that 100% space. If you want to align it next to your texts, you have to do that in the HTML code of your page/post or article!

Example:

<div style="float:left; width:30%">[slider]</div> Your text

Margin

You can put a fix margin around your slider. It's not device specific, so try to avoid using large values. It follows the CSS order of the margin values.

Padding Pro

You can put a fix padding around your slider. It's not device specific, so try to avoid using large values. It follows the CSS order of the padding values.

Perspective Pro

When the layer animations are happening in 3D, and they are shown from a distance, which is the perspective point. The best way to imagine it is as in real life, if you watch something from 1cm, it will look different from what you see from 1m.

Border width Pro

You can put border around the slider.

Border color Pro

You can put border around the slider.

Border radius Pro

You can round the corner of your slider.

Slider CSS preset Pro

You can select from a list of preset CSS codes for the slider.

Slider CSS Pro

You can write your custom CSS code (without selectors!) here to further design the slider.