Slider Revolution + RequireJS example

Bare-bones example of Slider Revolution working with RequireJS

  • Important Article Note:
    This article is for the non-WordPress version of the plugin.
  • Slider Revolution runs on jQuery!
    Before getting started, it's important to note that Slider Revolution depends on jQuery. So for this example, we'll use the "RequireJS + jQuery" example available here.

1. Download a copy of RequireJS + jQuery, and add the downloaded folder to your localhost/dev server.

2. View the "app.html" file to verify that the setup is working correctly.

3. Copy Slider Revolution's "assets" and "revolution" folders into the "webapp" folder.

4. Open one of the HTML files from the plugin's "examples" folder.

5. Copy the slider's CSS and HTML markup into the "app.html" file.

Do a quick search and replace for "../../", to update the stylesheet and image paths. So this:

<link rel="stylesheet" type="text/css" href="../../revolution/css/settings.css">

 

would become this:

<link rel="stylesheet" type="text/css" href="revolution/css/settings.css">

6. Copy the slider's "init" script into a blank file, and save it as "slider-init.js" into the "scripts" folder.

Update the "jsFileLocation" to the new path for the "extension" scripts from this:

jsFileLocation:"../../revolution/js/",

to this:

jsFileLocation:"revolution/js/",

And then replace the “document.ready()” part with “window.MySlider = function()”.  So this:

becomes this:

7. Finally, open the "main.js" file, and add the following scripts to the "require" stack, and also call "MySlider()" in the "complete/done" function to kick off the slider.

  • ../revolution/js/jquery.themepunch.tools.min
  • ../revolution/js/jquery.themepunch.revolution.min
  • slider-init

Partial Package download zip

Just drop the plugin’s “assets” and “revolution” folders (step #3 above) into the attached “webapp” folder for a working example.