Slider Revolution 6.3 NOW available!

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 -->

Popular Solutions