Search
Close this search box.
Search
Close this search box.

Revolution Slider

How can I make my full screen slider responsive?

Just add this code in the Custom Javascript section of your slider:

onStageResize();

$(window).resize(function () {
    onStageResize();
});

function onStageResize() {

    var api = revapi1;
    var screenSize = jQuery(window).width(), layout;

    if (screenSize <= 480) {
        jQuery('#rev_slider_1_1').show().revolution({
            gridwidth: 300,
            gridheight: 200
        });
        layout = 'fullwidth';
        var sliderSettings = api.data('opt') || api[0].opt;
        sliderSettings.sliderLayout = layout;
    }
}

How can I change the animation transition for mobiles?

Just add this code in the Custom Javascript section of your slider:

onStageResize();

jQuery(window).resize(function () {
    onStageResize();
});

function onStageResize() {
    var screenSize = jQuery(window).width(), layout;
    if (screenSize <= 480) {
        jQuery("#rev_slider_1_1 ul li").data("transition", "slidehorizontal");
        jQuery("#rev_slider_1_1 ul li").data("masterspeed", "500"); 
    }
}