The Worlds Most Powerful
WordPress Builder

If you Purchased & Registered a Slider Revolution License you can comfortably upgrade version 5.x to 6.0 from your WordPress Dashboard.

Why Activate Slider Revolution?

Activating Slider Revolution with your Personal Purchas Code will unlock all available Features.

Easy Live Updates
Personal License Key
200+ Template Library
1000+ Object Library
25+ Amazing Add-Ons
1on1 Ticket Support

*Regular License from $26. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

QUICK TIP:

Review the Basic Template Setup for information about how to setup a custom production environment.

To get started with the FilmStrip Add-On, first add the “revolutions-addons” folder into your production site:

Next, add the FilmStrip stylesheet and script. The script should placed below all other scripts on the page.


<!– FILMSTRIP STYLESHEET –>
<link type=”text/css” href=”revolution-addons/filmstrip/css/revolution.addon.filmstrip.css” />


<!– FILMSTRIP SCRIPT –>
<script type=”text/javascript” src=”revolution-addons/filmstrip/js/revolution.addon.filmstrip.min.js”></script>

Next, assign a variable to your slider’s main settings script as shown in the following example.


var slider = jQuery(‘#rev_slider_1’).show().revolution({

/* ******************** */
/* SLIDER SETTINGS HERE */
/* ******************** */

});

Then initialize the FilmStrip Addon:


var tpj = jQuery;
var slider = jQuery(‘#rev_slider_1’).show().revolution({

/* ******************** */
/* SLIDER SETTINGS HERE */
/* ******************** */

});

// initialize the FilmStrip Add-On
RsFilmstripAddOn(tpj, slider,

/* enter the path (or domain url) to the filmstrip-addon’s main directory */
“revolution-addons/filmstrip/”,

/* use true for carousel sliders, otherwise leave this at false */
false

);

Next, setup your Slides with your FilmStrip settings and images:

direction
  • “right-to-left”
  • “left-to-right”
  • “top-to-bottom”
  • “bottom-to-top”
The direction the strip should move in
filter
    Optional image filter that can be applied. Enter the “data-mediafilter” value from here if desired.
    times
      Movement speed in milliseconds for the four responsive levels
      imgs
        The url and alt tags for each image


        <!– BEGIN FILMSTRIP SLIDE –>
        <li data-transition=”fade”

        <!– filmstrip settings and image urls –>
        data-filmstrip='{

        “direction”: “right-to-left”,
        “filter”: “none”,
        “times”: “40,40,40,40”,
        “imgs”:[
        {“url”: “assets/images/model1-1.jpg”, “alt”: “Image One”},
        {“url”: “assets/images/model2-1.jpg”, “alt”: “Image Two”},
        {“url”: “assets/images/model3-1.jpg”, “alt”: “Image Three”},
        {“url”: “assets/images/model4-1.jpg”, “alt”: “Image Four”},
        {“url”: “assets/images/model5-1.jpg”, “alt”: “Image Five”}
        ]}’>

        <!– Load the transparent .png file for FilmStrip Slides –>
        <img src=”assets/images/transparent.png” class=”rev-slidebg”>

        <!– ***************** –>
        <!– SLIDE LAYERS HERE –>
        <!– ***************** –>

        </li><!– END FILMSTRIP SLIDE –>

        Popular Solutions