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 Purchase 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 $29. One License Key required per Domain.

Slider Revolution 6.0 NOW available!

For this example, we'll change the background color of the page based on a "Custom Field" addition to each slide.

1. Edit one of your slide's, and then in the "General Slide Settings", add one of the following to the "HTML Data" section:

data-color="light"
data-color="dark"

2. Next, add some custom styles for "sr-light" or "sr-dark" (we'll preface the "data-color" value with "sr-" to help avoid CSS naming conflicts).

/* animate the page's background color */
body {transition: background-color 0.5s ease-out}
 
/* custom styles for the custom classes that will get added */
body.sr-dark {background-color: #000}
body.sr-light {background-color: #FFF}

3. Finally, add the following Custom JavaScript:

// change "revapi1" below to whatever API name is assigned to your slider
var api = revapi1.on('revolution.slide.onchange', function(e, data) {
jQuery('body').removeClass('sr-light sr-dark').addClass(
'sr-' + api.find('rs-slide').eq(data.slideIndex - 1).attr('data-color')
);
});

This effectively adds either the "sr-light" or "sr-dark" class to the body element of the page.

And now since the custom class name is being added to the "body" element, this allows for many possibilities. Here's an example:

/* Change the color of all text in the page's "entry-content" div */
body.sr-light .entry-content {color: #FFF}
body.sr-dark .entry-content {color: #000}

Popular Solutions