Basic Usage (jQuery) Basic Usage (No-jQuery) Define Slides HTML Code Slider with Loading Screen (jQuery) Slider with Loading Screen (No-jQuery) Slider with Bullet Navigator (jQuery) Slider with Bullet Navigator (No-jQuery) Slider with Arrow Navigator (jQuery) Slider with Arrow Navigator (No-jQuery) Slider with Thumbnail Navigator (jQuery) Slider with Thumbnail Navigator (No-jQuery) Slider with Slideshow (jQuery) Slider with Slideshow (No-jQuery) Slider with Fixed/Static Element (e.g. QR code) Pass html Validation (against w3c standards) Reference - Options Reference - UI Definition Reference - API Tip - Arrange Layout & Adjust Size Tip - Make Responsive Slider Tip - Make Best Performance Slider Tool - Slideshow Transition Viewer

UI of Jssor Slider is plugable, within 'outer container', user can insert 'loading screen', 'slides container', '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. To create layer animation, please use slider maker.

For position and size of element, please specify value in pixels. e.g. 'style="position: relative; top:0px; left: 0px; width:100px; height:50px;"'.

Reference - UI Definition
Outer Container
Property Required Value Example
id required [string] id="slider1_container"
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
u required loading u="loading"
position required absolute style="position:absolute;"
Ad
Slides Container
Property Required Value Example
required slides 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
u required navigator 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
u required arrowleft|arrowright u="arrowleft" | 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
u required thumbnavigator 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;"