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
If 'loading screen' specified, the 'loading screen' will display when a image is loading. User can customize loading screen to any format.
Slider with Loading Screen (No-jQuery)
1. Javascript Code
<script src="jssor.slider.min.js"></script>
<script>
    jssor_slider1_starter = function (containerId) {
        var options = {};
        var jssor_slider1 = new $JssorSlider$(containerId, options);
    };
</script>
Ad
2. HTML code + trigger
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 600px; height: 300px;">
    <!-- Loading Screen -->
    <div u="loading" style="position: absolute; top: 0px; left: 0px;">
        <!-- your loading screen content here -->
    </div>
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
    <!-- Trigger -->
    <script>jssor_slider1_starter('slider1_container');</script>
</div>