API: UI Definition - Jssor Slider
UI of Jssor Slider is plugable, within outer container, user can insert loading screen, slides container, bullet navigator, arrow navigator, thumbnail navigator.
outer container and slides container are required, all others are optional. And also, user can insert any customize HTML code into outer container.
User can insert static layer into any slide.
For position and size of element, please specify value in pixels. e.g. 'style="position: relative; top:0px; left: 0px; width:100px; height:50px;"'.
Outer Container
|
Property
|
Required
|
Value
|
Example
|
|
id
|
required
|
[string]
|
id="jssor_1"
|
|
position
|
required
|
absolute | relative
|
style="position:absolute;"
|
|
width
|
required
|
[integer]px
|
style="width:600px;"
|
|
height
|
required
|
[integer]px
|
style="height:300px;"
|
Loading Screen
|
Property
|
Required
|
Value
|
Example
|
|
data-u
|
required
|
loading
|
data-u="loading"
|
|
position
|
required
|
absolute
|
style="position:absolute;"
|
Slides Container
|
Property
|
Required
|
Value
|
Example
|
|
data-u
|
required
|
slides
|
data-u="slides"
|
|
position
|
required
|
absolute | relative
|
style="position:absolute;" ("absolute" recommended)
|
|
top
|
optional
|
[integer]px
|
style="top:0px;"
|
|
left
|
optional
|
[integer]px
|
style="left:0px;"
|
|
bottom
|
optional
|
[integer]px
|
style="bottom:0px;"
|
|
right
|
optional
|
[integer]px
|
style="right:0px;"
|
|
width
|
required
|
[integer]px
|
style="width:300px;"
|
|
height
|
required
|
[integer]px
|
style="height:30px;"
|
|
overvlow
|
required
|
hidden
|
style="overflow:hidden;"
|
|
cursor
|
optional
|
|
style="cursor:move;"
|
Bullet Navigator
|
Property
|
Required
|
Value
|
Example
|
|
data-u
|
required
|
navigator
|
data-u="navigator"
|
|
position
|
required
|
absolute
|
style="position:absolute;"
|
|
top
|
optional
|
[integer]px
|
style="top:12px;"
|
|
left
|
optional
|
[integer]px
|
style="left:12px;"
|
|
right
|
optional
|
[integer]px
|
style="right:12px;"
|
|
bottom
|
optional
|
[integer]px
|
style="bottom:12px;"
|
Arrow Navigator
|
Property
|
Required
|
Value
|
Example
|
|
data-u
|
required
|
arrowleft|arrowright
|
data-u="arrowleft" | data-u="arrowright"
|
|
position
|
required
|
absolute
|
style="position:absolute;"
|
|
top
|
optional
|
[integer]px
|
style="top:130px;"
|
|
left
|
optional
|
[integer]px
|
style="left:8px;"
|
|
right
|
optional
|
[integer]px
|
style="right:8px;"
|
|
bottom
|
optional
|
[integer]px
|
style="bottom:8px;"
|
|
width
|
required
|
[integer]px
|
style="width:50px;"
|
|
height
|
required
|
[integer]px
|
style="heght:50px;"
|
Thumbnail Navigator
|
Property
|
Required
|
Value
|
Example
|
|
data-u
|
required
|
thumbnavigator
|
data-u="thumbnavigator"
|
|
position
|
required
|
absolute
|
style="position:absolute;"
|
|
top
|
optional
|
[integer]px
|
style="top:0px;"
|
|
left
|
optional
|
[integer]px
|
style="left:0px;"
|
|
right
|
optional
|
[integer]px
|
style="right:0px;"
|
|
bottom
|
optional
|
[integer]px
|
style="bottom:0px;"
|
|
width
|
required
|
[integer]px
|
style="width:600px;"
|
|
height
|
required
|
[integer]px
|
style="heght:60px;"
|
Static Layer
|
Property
|
Required
|
Value
|
Example
|
|
position
|
required
|
absolute
|
style="position:absolute;"
|
|
top
|
required
|
[integer]px
|
style="top:100px;"
|
|
left
|
required
|
[integer]px
|
style="left:100px;"
|
|
width
|
required
|
[integer]px
|
style="width:100px;"
|
|
height
|
required
|
[integer]px
|
style="heght:100px;"
|
|
overflow
|
optional
|
hidden
|
style="overflow:hidden;"
|