Looking for mind-blowing effects? ūü§Į Explore Slider Revolution's advanced WebGL animations

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

[ess_grid alias="wp-popular-solutions"]
Impressum | Datenschutz