Development
Define Slides HTML Code

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.

Image Slide
<div><img data-u="image" src="image.jpg" /></div>
Lazy Loading Image Slide
<div><img data-u="image" src2="image.jpg" /></div>
Image with Link Slide
<div><a href="url"><img data-u="image" src="image.jpg" /></a></div>
Content Slide
<div><!-- Any HTML Content Here --></div>
Image + Content Slide
<div><img data-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 data-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 data-u="thumb" src="thumbimage.jpg" />
</div>
Prevent slider from dragging on an element
<div>
    <div data-nodrag="true" ...>                        
        <!-- drag to swipe does not work on this element -->
    </div>
</div>
Set idle period for each individual slide
<div id="slider1_container" ...>
    <div data-u="slides">
        <div><!-- slide 1 idle period is value of $Idle option --></div>
        <div data-idle="5000"><!-- slide 2 idle period is 5 seconds --></div>
        <div data-idle="2000"><!-- slide 3 idle period is 2 seconds --></div>
        <div><!-- slide 4 idle period is value of $Idle option --></div>
    </div>
</div>