How to Dynamically Replace Slide Images in Slider Revolution

In some cases you will need to dynamically replace slide images in Slider Revolution. For example if you want to change image depending on browser size. Or after some user actions.

This is quite easy with use of Slider Revolution API and Custom Javascript.

Lets for example add feature that changes second slides image to alternative one if browser with is less than 600px.

Open Slider Settings page and add following code to Custom Javascript option text field:

var revapi = revapiX;
revapi.bind("revolution.slide.onloaded",function (e) {
    if (jQuery(document).width() < 600)
    {
    	var slideNumber = 2; // defines number of slide to change
    	var newImage = 'new_image.jpg'; // url of new image
    	jQuery('ul li:nth-child(' + slideNumber + ') div.tp-bgimg', revapi)
    		.css('background-image', 'url("' + newImage + '")')
    		.attr('src', newImage)
    		.data('src', newImage);
    }
});

In this script replace X in revapiX to id of your slider. For example revapi5 if slider id is 5.

With this technique you can dynamically replace slide images of any slide at any time.