Slider settings - General
The General tab is located at the Slider settings page.
There are many options to publish your slider, and you can find most of them here. Learn more about publishing your slider.
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.
The thumbnail of the slider which shows up at the Dashboard. It's not used anywhere else.
The aria-label attribute is used to define a string that labels the current element.
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
<a href="#homepage-slider">Go to slider</a>
Within Smart Slider at any Link:
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.
You can use the anchor to switch to a selected slide by writing the slide number after the anchor, like this:
#anchor-2, which will switch to the second slide of the slider.
Scroll to slide
You can make the page scroll to the slider when you use the
Switch Slide option.
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.
Enables the Parallax effect on the slider background.
The fixed background doesn't work on sliders where the Force full width is enabled due to browser limitations!
Sets the background size of the slider background.
Background color Pro
This option allows you to set a background color for the slider, which will be behind all slides.
Background video Pro
You can set a background video for the whole slider, which will be behind all slides.
You can mute the video. It's recommended that you leave the video muted, otherwise the video will not play in most browsers.
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.
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!
<div style="float:left; width:30%">[slider]</div> Your text
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.
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.
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.