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

User can place any HTML code in a slide. A slide can be combination of 'image', 'linked image', 'layer' and 'thumbnail'. The following are examples of slide definition HTML code.

To create layer animation, please use slider maker.

Define Slides HTML Code
Image Slide
<div><img u="image" src="image.jpg" /></div>
Lazy Loading Image Slide
<div><img u="image" src2="image.jpg" /></div>
Image with Link Slide
<div><a href="url"><img u="image" src="image.jpg" /></a></div>
Content Slide
<div><!-- Any HTML Content Here --></div>
Image + Content Slide
<div><img u="image" src="image.jpg" /><!-- Any HTML Content Here --></div>
Ad
Slide with Static Layer
<div>
    <div style="position: absolute; top: 125px; left: 125px; width: 350px;height: 50px;">
        <!-- Any HTML Content Here -->
    </div>
</div>
Slide with Image + Static Layer
<div>
    <img u="image" src="image.jpg" />
    <div style="position: absolute; top: 125px; left: 125px; width: 350px;height: 50px;">
        <!-- Any HTML Content Here -->
    </div>
</div>
Slide with Thumbnail
<div>
    <!-- Any HTML Content Here -->
    <img u="thumb" src="thumbimage.jpg" />
</div>
Image Slide (for Blogger)
<div><img u="image" src="image.jpg" style="border:none;padding:0;" /></div>