Please note, this is a STATIC archive of website www.themepunch.com from 28 Sep 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Slider Revolution + RequireJS example

home_topbanner

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.

download-requirejs

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

webapp
require-js-success

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

rev-core-folders
copied-folders

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

slider-classic-location

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">
example-merged-require-js

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:

slider-init-script

becomes this:

modified-script

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
merge-sliders-scripts

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.