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