The best way to give advice to
your children is to find out what they
want and then advise them to do it.

We are born of love, Love is our mother.

Who's a girl gonna talk to if not her mother?

All wealth is the product of labor.

My mother thinks I could have even run a larger company.

This example of Theme 3 uses the image folder as the source for the slide background images.

Highlighted features: conditional images, image thumbnails, fade effect, auto-scale layers, responsiveness, touch-enabled.

The most important feature showcased in this example is the possibility to specify different image sources for different slider sizes. For example, if the slider goes in full-screen mode, the images will change to a higher resolution version. Also, if you open the slider on a mobile device, another set of images (with lower resolution and lower file size) can be loaded.

Other showcased features are the automatic scaling of the layers when the slider becomes smaller and the use of a fade transition instead of the default slide transition.

Here are the examples of code that was used on each slide for the Theme 3 example shown above.

Slide 1

<h2 class="sp-layer sp-padding sp-white" data-position="centerCenter" data-show-transition="top" data-show-delay="1000"  >
The best way to give advice to <br> your children is to find out what they <br> want and then advise them to do it.
</h2>

Slide 2

<h2 class="sp-layer" data-position="bottomCenter" data-show-transition="top" data-show-delay="1000"  data-vertical="50" style="color:#000" data-vertical="60">
We are born of love, Love is our mother.
</h2>

Slide 3

<h2 class="sp-layer sp-black sp-padding" data-position="centerCenter" data-show-transition="top" data-show-delay="1000" >
Who's a girl gonna talk to if not her mother?
</h2>

Slide 4

<h2 class="sp-layer" data-position="centerCenter" data-show-transition="top" data-show-delay="1000"  data-vertical="100" style="color:#fff">
All wealth is the product of labor.
</h2>

Slide 5

<h2 class="sp-layer sp-padding sp-black" data-position="leftCenter" data-show-transition="top" data-show-delay="1000"  data-vertical="100" style="color:#fff">
My mother thinks I could have even run a larger company.
</h2>