Is there a way to change the body class of a Wordpress page based on Rev Slider's slide? - wordpress

Question

The goal is: as the slide of rev slider changes, the body's page background color changes. The only way that I think it could be possible is using custom class on page slug. But how to insert a class based on the slide? Is it possible?

Answer 1

1) You must find where Revolution Slider is initialized in your theme or plugin, and either a) note the variable it is assigned to or b) assign it to a variable. It should be something like this:
var revapi2 = jQuery('#slider_id').show().revolution();
New versions of Revolution Slider already assign the slider to a variable that allows binding. The format for this variable is revapi{id}.
2) Once the slider is assigned to a variable, you'll have access to the slide's API methods, described fully here. One of the methods, revolution.slide.onchange will enable detecting when the slider is about to change slides. Then you can do something like this to assign the body class depending on the slide's index. Note I'm using jQuery because it's a jQuery plugin and I'm using the variable automatically assigned by the Revolution Slider WordPress plugin:
revapi2.on('revolution.slide.onbeforeswap', function(event, data) {
switch (data.nextSlideIndex) {
case 1:
bodyClass = "green";
break;
case 2:
bodyClass = "blue";
break;
case 3:
bodyClass = "red";
break;
default:
bodyClass = "yellow";
}
$('body').removeClass('red green blue yellow').addClass(bodyClass);
});