The bullets pane contains options similar to the ones we have looked at for the arrows.
In the Visibility options you can choose if you want to Show the bullets 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.
The Position of the bullets give you full control on where to place them.
There are eight main positions as you have for the arrows.
After you place them in a position you can choose if you want them aligned 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 bullets to give them more breathing space. We suggest to give enough space between the bullets as they need to be used even on mobile devices.
The bullets show the current page the slider is on.
They have two states they can be in. The Normal state and the Active state. These two states are styled separately clicking on the corresponding buttons.
The functionality are identical so we will explore it only once.
The Bullet Width and Height give you the possibility to shape them in many different sizes. The color can be chosen to match the website’s color scheme. You can set it to a transparent grey to match any color.
You can set a Border inside the bullets and the radius will round the corners. To have round bullets simply give them a squared shape and add a radius value of the same size.
The border size and radius follow the css format giving the possibility to style the bullets in many possible ways.
Just an example:
Set the bullet size to 16 x 16
Set the color to rgba( 0, 0, 0, 0.5 )
Set the border size to 3 0 0
Set the radius to 12
Playing around with the values might bring surprising looks.
Remember to style the active state differently or it won’t be possible to know in which slide the user is in.