Anatomy of a Basic Slider

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

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

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

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.

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.

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.

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

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

7. Create some basic Slides

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

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

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.

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.

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