Sample Markup:
|
1
2
3
4
5
6
7
8
9
|
<p></p>
<ul>
</ul>
<p></p>
|
Each slide is made of its own List Item Element <li>. For example, the sample code above has 3 slides. Let’s look at the markup of a single slide from the above sample code.
|
1
2
3
4
5
|
<p></p>
<ul>
<li></li></ul>
|
Add Slide:
New slides can be added by creating new List Item Elements <li>. Simply copy the markup starting from <li> tag to the closing </li> tag and paste it at the end. This would add a new slide at the very last. Similarly you can move the <li> … </li> tag to the very beginning to make it the first slide.
Remove Slide:
Simply remove the <li> tag corresponding to the slide you want to remove. Be sure to remove the markup starting from <li> tag to the closing </li> tag.
Slide Options:
There are many options available for slides. We can add these options as
attributes to the <li> element.
Here’s an example where we’re using the
data-transition attribute to use the fade transition.
Following attributes / options are available:
- data-transition The appearance transition of this slide
- Options:
- boxslide
- boxfade
- slotzoom-horizontal
- slotslide-horizontal
- slotfade-horizontal
- slotzoom-vertical
- slotslide-vertical
- slotfade-vertical
- curtain-1
- curtain-2
- curtain-3
- slideleft
- slideright
- slideup
- slidedown
- fade
- random
- slidehorizontal
- slidevertical
- papercut
- flyin
- turnoff
- cube
- 3dcurtain-vertical
- 3dcurtain-horizontal
- data-masterspeed Set the Speed of the Slide Transition. Default 300, min:100 max:2000.
- data-slotamount The number of slots or boxes the slide is divided into. If you use boxfade, over 7 slots can be juggy.
- data-link A link on the whole slide pic
- data-target A link target (like _self or _blank)
- data-linktoslide If data-link="slide" is set, you can define a slide where to jump in case the image has been clicked.
- data-delay A new delay value for the Slide. If no delay defined per slide, the delay defined via Options will be used
- data-thumb An Alternative Source for thumbs. If not defined a copy of the background image will be used in resized form