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
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!
This effect is also turned off for tablet and mobile devices, because some of them cannot handle it well.
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.
☝️ Note: Some background animations are not compatible with paddings, so if you see any issues, you should either not use paddings, or turn off the background animations, which aren't working with this setting!
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.