0% found this document useful (0 votes)
89 views5 pages

jssor-API - UI Definitio

The document summarizes the UI definition for Jssor Slider, an API for creating image sliders. It explains that the slider UI is pluggable, allowing users to insert loading screens, slides containers, bullet navigators, arrow navigators, and thumbnail navigators within the outer container. The outer container and slides container are required, while other elements are optional. It provides details on the properties, values, and examples for configuring these different UI elements.

Uploaded by

Zi Xi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
89 views5 pages

jssor-API - UI Definitio

The document summarizes the UI definition for Jssor Slider, an API for creating image sliders. It explains that the slider UI is pluggable, allowing users to insert loading screens, slides containers, bullet navigators, arrow navigators, and thumbnail navigators within the outer container. The outer container and slides container are required, while other elements are optional. It provides details on the properties, values, and examples for configuring these different UI elements.

Uploaded by

Zi Xi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Jssor

Home Demos Tutorial Help Development Pricing Support Log in Sign up

Jssor Slider Dev Startup


API: UI Definition - Jssor Slider
Slides HTML Code
UI of Jssor Slider is plugable, within outer container, user can insert
API: Options loading screen, slides container, bullet navigator, arrow
navigator, thumbnail navigator.
 Methods, Properties & Events
API:
outer container and slides container are required, all others are
 UI Definition
API: optional. And also, user can insert any customize HTML code into
 outer container.
Slider with Loading Screen
 User can insert static layer into any slide.
Slider with Bullet Navigator
 For position and size of element, please specify value in pixels. e.g.
'style="position: relative; top:0px; left: 0px; width:100px;
Slider
 with Arrow Navigator height:50px;"'.
 with Thumbnail Navigator
Slider
Outer Container
 with Slideshow
Slider
Property Required Value Examp
 le
Slider with Fixed/Static Element

id required [string] id="jss
Pass HTML Validation
 or_1"
Tip
- Arrange Layout & Adjust Size position required absolute | relative style="
position
- Adjust Speed
Tip
:absolu

Tip - Make Responsive Slider
te;"

 width required [integer]px style="


Tool - Slideshow Transition Viewer width:6

00px;"

height required [integer]px style="
height:
300px;"

Loading Screen
Property Required Value Examp
le

data-u required loading data-


u="load
ing"

position required absolute style="


position
:absolu
te;"

Ad

Slides Container
Property Required Value Examp
le

data-u required slides data-


u="slid
es"

position required absolute | relative style="


position
:absolu
te;"
("absol
ute"
recom
mende
d)

top optional [integer]px style="t


op:0px;
"

left optional [integer]px style="l


eft:0px;
"

bottom optional [integer]px style="


bottom:
0px;"

right optional [integer]px style="r


ight:0p
x;"

width required [integer]px style="


width:3
00px;"

height required [integer]px style="


height:
30px;"

overvlow required hidden style="


overflo
w:hidde
n;"

cursor optional style="


cursor:
move;"

Bullet Navigator
Property Required Value Examp
le

data-u required navigator data-


u="navi
gator"

position required absolute style="


position
:absolu
te;"

top optional [integer]px style="t


op:12p
x;"

left optional [integer]px style="l


eft:12p
x;"

right optional [integer]px style="r


ight:12
px;"

bottom optional [integer]px style="


bottom:
12px;"

Arrow Navigator

Property Required Value Examp


le

data-u required arrowleft|arrowright data-


u="arro
wleft" |
data-
u="arro
wright"

position required absolute style="


position
:absolu
te;"

top optional [integer]px style="t


op:130
px;"

left optional [integer]px style="l


eft:8px;
"

right optional [integer]px style="r


ight:8p
x;"

bottom optional [integer]px style="


bottom:
8px;"

width required [integer]px style="


width:5
0px;"

height required [integer]px style="


heght:5
0px;"

Thumbnail Navigator

Property Required Value Examp


le

data-u required thumbnavigator data-


u="thu
mbnavi
gator"

position required absolute style="


position
:absolu
te;"

top optional [integer]px style="t


op:0px;
"

left optional [integer]px style="l


eft:0px;
"

right optional [integer]px style="r


ight:0p
x;"

bottom optional [integer]px style="


bottom:
0px;"

width required [integer]px style="


width:6
00px;"

height required [integer]px style="


heght:6
0px;"

Static Layer
Property Required Value Examp
le

position required absolute style="


position
:absolu
te;"

top required [integer]px style="t


op:100
px;"

left required [integer]px style="l


eft:100
px;"

width required [integer]px style="


width:1
00px;"

height required [integer]px style="


heght:1
00px;"

overflow optional hidden style="


overflo
w:hidde
n;"

 
Jssor Slider 2009-2021

You might also like