This is the settings pane with most of the options, followed by the bullets options pane.
After all the arrows and bullets are an essential part of a slider and they need to fit nicely with the look of the rest of the website.
The Arrows pane has more content than you can see, some parts can be accessed scrolling down. But lets start from the beginning.
In the Visibility options you can choose if you want to Show the arrows and if only on Hover of the mouse. Finally you can decide if they should be visible on Touch devices. This last option overrides the visibility only on touch devices.
After that you can choose the arrow Image you prefer. Further styling is possible with the options that follow.
The Position of the arrows gives you full control on where to place them.
There are eight main positions for both the previous and next arrow. They can share the same position as well.
After you place them you can choose if you want them to align vertically and offset them from their chosen position. Positive numbers will push them outside of the slider, negative numbers will push them inside the slider.
In the Miscellaneous you can set the Gap between the arrows in case they are next to each other.
To use the rest of the settings just scroll down in the pane to expose them.
The arrows have two states they can be in. A Normal state if there is no interaction with it and a Hover state when the mouse passes over them. These two states are styled separately clicking on the corresponding buttons.
The functionality are identical so we will explain it only once.
First of all you can choose the arrow size and its color. The arrows are created with font icons making them look as good as possible in any size.
The Arrow shadow applies only to the icon. The settings are straight forward. Choosing a semi-transparent color for the shadow will normally give a more pleasing look.
The Box padding expands the arrows container around the icon. Setting a color will make it visible.
A Box Border can be added stating a size and a radius to round the corners. The radius value follows the css format accepting from 1 to 4 digits separated by a space. The order of the values are as follow:
- One single value to set all corners identically
- Two values to set the top-left and bottom-right roundness differently from the top-right and bottom-left roundness
- Three values will set the top-left with the first value, top-right and bottom-left with the second value and the bottom-right with the last value
- Four values will set every corners independently starting from the top-left corner going clockwise
The Box Shadows will apply only to the box container.
The Hover state has the same settings we just explored. Giving a different style will make the arrows more interactive and pleasing. It is normally enough to change just a few settings compared to the normal state to obtain an interesting effect.