Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

Prerequisite

Setup your testing environment first before continuing.

This article covers the bare minimum HTML markup needed to create a Slider Revolution.

The example will include two images, and navigation arrows/bullets for some basic functionality.

1. To get started, create a new HTML file in your favorite text editor with the following structure. Then name the file "my-first-slider.html".

<!DOCTYPE HTML>
<html>
 
    <head>
 
        <meta charset="utf-8">
        <title>My First Slider</title>
 
    </head>
 
    <body>
    </body>
 
</html>

2. Save the file into the testing environment previously created.

3. Add the slider's stylesheets to the "head" section of the document.

<!DOCTYPE HTML>
<html>
 
    <head>
 
        <meta charset="utf-8">
        <title>My First Slider</title>
 
        <!-- Slider Revolution CSS Files -->
        <link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
        <link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
        <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
 
    </head>
 
    <body>
    </body>
 
</html>

4. Add the slider's JavaScript files to the "head" section of the document.

Important Note

jQuery should only ever be loaded once, and it should always be included before all other scripts on the page.

<!DOCTYPE HTML>
<html>
 
    <head>
 
        <meta charset="utf-8">
        <title>My First Slider</title>
 
        <!-- Slider Revolution CSS Files -->
        <link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
        <link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
        <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
 
        <!-- Core jQuery Script -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
 
        <!-- Slider Revolution core JavaScript files -->
        <script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
 
    </head>
 
    <body>
    </body>
 
</html>

5. If testing locally, add the slider's extension scripts. Otherwise, skip ahead to step #6 below, as extension scripts will load automatically and on-demand online.

<!DOCTYPE HTML>
<html>
 
    <head>
 
        <meta charset="utf-8">
        <title>My First Slider</title>
 
        <!-- Slider Revolution CSS Files -->
        <link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
        <link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
        <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
 
        <!-- Core jQuery Script -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
 
        <!-- Slider Revolution core JavaScript files -->
        <script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
 
        <!-- Slider Revolution extension scripts. ONLY NEEDED FOR LOCAL TESTING -->
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.actions.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.carousel.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.migration.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.parallax.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.video.min.js"></script>
 
    </head>
 
    <body>
    </body>
 
</html>

6. Build your Slider Revolution wrapper containers

"Auto" Layouts: Slider will fit inside its parent container

Important Note

The "data-version" attribute shown below is required and needs to be added to the slider's main div (the one with "rev_slider" as its class name. The version number is located inside the "_release_log.html" file located in the root folder of the plugin's main download zip.

<div class="rev_slider_wrapper">
 
    <!-- the ID here will be used in the inline JavaScript below to initialize the slider -->
    <div id="rev_slider_1" class="rev_slider" data-version="5.4.5" style="display:none">
 
        <ul>
            <!-- *********************** -->
            <!-- Slides to be added here -->
            <!-- *********************** -->
        </ul>
 
    </div>
 
</div>

"Full-Width" Layouts: Slider will break out of its parent container to display full-width across the screen.

Quick Tip

For Full-Width sliders, make sure the "overflow" CSS property is NOT set to "hidden" for the slider's parent container.

<div class="rev_slider_wrapper fullwidthbanner-container">
 
    <!-- the ID here will be used in the JavaScript below to initialize the slider -->
    <div id="rev_slider_1" class="rev_slider fullwidthabanner" data-version="5.4.5" style="display:none">
 
        <ul>
            <!-- *********************** -->
            <!-- Slides to be added here -->
            <!-- *********************** -->
        </ul>
 
    </div>
 
</div>

"Full-Screen" Layouts: Slider will break out of its parent container to display full-screen.

Quick Tip

For Full-Screen sliders, make sure the "overflow" CSS property is NOT set to "hidden" for the slider's parent container.

<div class="rev_slider_wrapper fullscreen-container">
 
    <!-- the ID here will be used in the JavaScript below to initialize the slider -->
    <div id="rev_slider_1" class="rev_slider fullscreenbanner" data-version="5.4.5" style="display:none">
 
        <ul>
            <!-- *********************** -->      
            <!-- Slides to be added here -->
            <!-- *********************** -->
        </ul>
 
    </div>
 
</div>

7. Create some basic Slides

Quick Tip

For transparent slides, use "assets/images/transparent.png" for the image's src attribute instead.

<!-- BEGIN MAIN SLIDE LIST -->
<ul>
 
    <!-- MINIMUM SLIDE STRUCTURE -->
    <li data-transition="fade">
 
        <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
        <img src="assets/images/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">
 
    </li>
 
    <!-- MINIMUM SLIDE STRUCTURE -->
    <li data-transition="fade">
 
        <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
        <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
    </li>
 
</ul>
<!-- END MAIN SLIDE LIST -->

Full Slider Markup, with an "Auto" Layout, added to the "body" section of the document:

<body>
 
    <div class="rev_slider_wrapper">
 
        <!-- the ID here will be used in the JavaScript below to initialize the slider -->
        <div id="rev_slider_1" class="rev_slider" data-version="5.4.5" style="display:none">
 
            <ul>
 
                <!-- MINIMUM SLIDE STRUCTURE -->
                <li data-transition="fade">
 
                    <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                    <img src="assets/images/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">
 
                </li>
 
                <!-- MINIMUM SLIDE STRUCTURE -->
                <li data-transition="fade">
 
                    <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                    <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
                </li>
            </ul>
        </div>
    </div>
 
</body>

8. Basic script to initialize the Slider, with some navigation added for functionality

Adjust the "sliderLayout" setting in the script to match your chosen Layout from #6 above.

<script type="text/javascript">
 
    /* https://learn.jquery.com/using-jquery-core/document-ready/ */
    jQuery(document).ready(function() {
 
        /* initialize the slider based on the Slider's ID attribute */
        jQuery('#rev_slider_1').show().revolution({
 
            /* options are 'auto', 'fullwidth' or 'fullscreen' */
            sliderLayout: 'auto',
 
            /* basic navigation arrows and bullets */
            navigation: {
 
                arrows: {
                    enable: true,
                    style: 'hesperiden',
                    hide_onleave: false
                },
 
                bullets: {
                    enable: true,
                    style: 'hesperiden',
                    hide_onleave: false,
                    h_align: 'center',
                    v_align: 'bottom',
                    h_offset: 0,
                    v_offset: 20,
                    space: 5
                }
            }
        });
    });
 
</script>

Full code, with the extension scripts included (for local testing)

Quick Tip

If you haven't already, save the file to your slider's testing environment, and then open it in your web browser for a live preview.

<!DOCTYPE HTML>
<html>
 
    <head>
 
        <meta charset="utf-8">
        <title>My First Slider</title>
 
        <!-- Slider Revolution CSS Files -->
        <link rel="stylesheet" type="text/css" href="revolution/css/settings.css">
        <link rel="stylesheet" type="text/css" href="revolution/css/layers.css">
        <link rel="stylesheet" type="text/css" href="revolution/css/navigation.css">
 
        <!-- Core jQuery Script -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
 
        <!-- Slider Revolution core JavaScript files -->
        <script type="text/javascript" src="revolution/js/jquery.themepunch.tools.min.js"></script>
        <script type="text/javascript" src="revolution/js/jquery.themepunch.revolution.min.js"></script>
 
        <!-- Slider Revolution extension scripts. ONLY NEEDED FOR LOCAL TESTING -->
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.actions.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.carousel.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.kenburn.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.layeranimation.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.migration.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.navigation.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.parallax.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.slideanims.min.js"></script>
        <script type="text/javascript" src="revolution/js/extensions/revolution.extension.video.min.js"></script>
 
    </head>
 
    <body>
 
        <!-- ******************* -->
        <!-- BEGIN SLIDER MARKUP -->
        <!-- ******************* -->
        <div class="rev_slider_wrapper">
 
            <!-- the ID here will be used in the JavaScript below to initialize the slider -->
            <div id="rev_slider_1" class="rev_slider" data-version="5.4.5" style="display:none">
 
                <!-- BEGIN SLIDES LIST -->
                <ul>
 
                    <!-- MINIMUM SLIDE STRUCTURE -->
                    <li data-transition="fade">
 
                        <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                        <img src="assets/images/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">
 
                    </li>
 
                    <!-- MINIMUM SLIDE STRUCTURE -->
                    <li data-transition="fade">
 
                        <!-- SLIDE'S MAIN BACKGROUND IMAGE -->
                        <img src="assets/images/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
 
                    </li>
 
                </ul><!-- END SLIDES LIST -->
 
            </div><!-- END SLIDER CONTAINER -->
 
        </div><!-- END SLIDER CONTAINER WRAPPER -->
 
        <!-- Slider's main "init" script -->
        <script type="text/javascript">
 
            /* https://learn.jquery.com/using-jquery-core/document-ready/ */
            jQuery(document).ready(function() {
 
                /* initialize the slider based on the Slider's ID attribute from the wrapper above */
                jQuery('#rev_slider_1').show().revolution({
 
                    /* options are 'auto', 'fullwidth' or 'fullscreen' */
                    sliderLayout: 'auto',
 
                    /* basic navigation arrows and bullets */
                    navigation: {
 
                        arrows: {
                            enable: true,
                            style: "hesperiden",
                            hide_onleave: false
                        },
 
                        bullets: {
                            enable: true,
                            style: "hesperiden",
                            hide_onleave: false,
                            h_align: "center",
                            v_align: "bottom",
                            h_offset: 0,
                            v_offset: 20,
                            space: 5
 
                        }
                    }
                });
            });
 
        </script>
 
        <!-- ***************** -->
        <!-- END SLIDER MARKUP -->
        <!-- ***************** -->
 
    </body>
 
</html>

Congratulations! You've just created your very first Slider Revolution from scratch! Continue to the next page to add some content.

Popular Solutions

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