Pagination
Parameter
Type
Default
Description
pagination
object/boolean
false
Object with pagination parameters.
{
style
string
Predefined pagination styles. Values: effect1, effect2, effect3, effect4, effect5, effect6, effect7, effect8, effect9, effect10
clickable
boolean
If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type (style: effect1, effect2, effect5, effect6
)
dynamicBullets
boolean
Good to enable if you use bullets pagination with a lot of slides. So it will keep only few bullets visible at the same time.
normal
object
false
Object with custom navigation parameters in the normal state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color
should be backgroundColor
. Check some of the properties we recommend below.
{
width
string
The width property sets the width of the pagination button. Example format: "150px"
(more details here)
height
string
The height property sets the height of the pagination button. Example format: "50px"
(more details here)
backgroundColor
string
Background color on the pagination button. Example format: "#FF0000"
(more details here)
padding
string
Padding inside the pagination button. Example format: "20px 40px 20px 40px"
There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border
string
Border around the pagination button. Example format: "1px solid #FF0000"
First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius
string
This property allows you to add rounded corners to the pagination button. Example format: "25px"
For “pill” style button put “50%” as value. (more details here)
…
…
…
…
}
hover
object
false
Object with custom pagination parameters in the hover state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color
should be backgroundColor
. Check some of the properties we recommend below.
{
width
string
The width property sets the width of the pagination button. Example format: "150px"
(more details here)
height
string
The height property sets the height of the pagination button. Example format: "50px"
(more details here)
backgroundColor
string
Background color on the pagination button. Example format: "#FF0000"
(more details here)
padding
string
Padding inside the pagination button. Example format: "20px 40px 20px 40px"
There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border
string
Border around the pagination button. Example format: "1px solid #FF0000"
First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius
string
This property allows you to add rounded corners to the pagination button. Example format: "25px"
For “pill” style button put “50%” as value. (more details here)
…
…
…
…
}
active
object
false
Object with custom pagination parameters in the active state. All CSS parameters can be added in this format (check list of all properties here), example: CSS property background-color
should be backgroundColor
. Check some of the properties we recommend below.
{
width
string
The width property sets the width of the pagination button. Example format: "150px"
(more details here)
height
string
The height property sets the height of the pagination button. Example format: "50px"
(more details here)
backgroundColor
string
Background color on the pagination button. Example format: "#FF0000"
(more details here)
padding
string
Padding inside the pagination button. Example format: "20px 40px 20px 40px"
There are properties for setting the padding for each side of an element (top, right, bottom, and left). (more details here)
border
string
Border around the pagination button. Example format: "1px solid #FF0000"
First is width of the border, next the style of the border and the color of the border. (more details here)
borderRadius
string
This property allows you to add rounded corners to the pagination button. Example format: "25px"
For “pill” style button put “50%” as value. (more details here)
…
…
…
…
}
}
Last updated