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"); } }