Prerequisites
1. Setup your testing environment
2. Setup your basic slider
This article is an introduction to Slide Layer markup.
The example will include a basic Text Layer, with some styling and positioning applied.
1. Copy the following Layer HTML markup to your clipboard.
This following is an example of the bare-minimum HTML markup required to create a Slide Layer.
<!-- BEGIN BASIC TEXT LAYER -->
<div class="tp-caption tp-resizeme largewhitebg"
data-frames='[{
"delay": 0,
"speed": 300,
"from": "opacity: 0",
"to": "opacity: 1"
}, {
"delay": "wait",
"speed": 300,
"to": "opacity: 0"
}
]'>Caption Text</div><!-- END BASIC TEXT LAYER -->
2. Add the Text Layer markup to one of your existing Slides, placed after the Slide's main background image.
<!-- BEGIN SLIDE -->
<li data-transition="fade">
<!-- SLIDE'S MAIN BACKGROUND IMAGE -->
<img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
<!-- BEGIN BASIC TEXT LAYER -->
<div class="tp-caption tp-resizeme largewhitebg"
data-frames='[{
"delay": 0,
"speed": 300,
"from": "opacity: 0",
"to": "opacity: 1"
}, {
"delay": "wait",
"speed": 300,
"to": "opacity: 0"
}
]'>Caption Text</div><!-- END BASIC TEXT LAYER -->
</li><!-- END SLIDE -->