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