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
Basically, Jssor Slider is composed of 'outer container' and 'slides container'. In addition, user can insert 'loading screen', 'bullet navigator', 'arrow navigator', 'thumbnail navigator' inside 'out container' if in need.

'outer container' is master container which manages all other UI elements.

All slides are in 'Slides Container'.

Layout of elements mentioned above are always specified in pixels. e.g. 'style="position: relative; top:0px; left:0px; width:100px; height:50px;"'. See Reference - UI Definition.

For slide size, it inherits from 'slides container' by default unless '$SlideWidth/$SlideHeight' option is explicitly specified. See Reference - Options.

Apart from coding manually, it's highly recommended to arrange Layout with slider maker.

Ad
Tip - Arrange Layout & Adjust Size
Jssor Slider Layout Diagram
Outer Container
Slides Container
Bullet Navigator
Arrow Navigator
Thumbnail Navigator

See also Layout with slider maker