Please refer to the top hero section on this page for the example of Revolution Slider.
It's initialization code in this javascript file is:
function dz_rev_slider_5(){
if(dzQuery("#rev_slider_11_1").revolution == undefined){
revslider_showDoubleJqueryError("#rev_slider_11_1");
}else{
dzrevapi = dzQuery("#rev_slider_11_1").show().revolution({
sliderType:"standard",
sliderLayout:"fullscreen",
dottedOverlay:"none",
delay:9000,
navigation: {
onHoverStop:"off",
},
responsiveLevels:[1240,1240,778,778],
visibilityLevels:[1240,1240,778,778],
gridwidth:[1640,1640,778,778],
gridheight:[768,768,960,960],
lazyType:"none",
parallax: {
type:"mouse",
origo:"enterpoint",
speed:400,
speedbg:0,
speedls:0,
levels:[5,10,15,20,25,30,35,40,45,46,47,48,49,50,51,55],
},
shadow:0,
spinner:"spinner0",
stopLoop:"off",
stopAfterLoops:-1,
stopAtSlide:-1,
shuffle:"off",
autoHeight:"off",
fullScreenOffsetContainer: "",
disableProgressBar:"on",
hideThumbsOnMobile:"off",
hideSliderAtLimit:0,
hideCaptionAtLimit:0,
hideAllCaptionAtLilmit:0,
debugMode:false,
fallbacks: {
simplifyAll:"off",
nextSlideOnWindowFocus:"off",
disableFocusListener:false,
}
});
}
}
I need to reduce the height of the slider by 30% for mobile devices. And by following this answer, I tried changing the value of gridheight
from [768,768,960,960]
to [768,768,672,672]
. I also tried changing the value of autoHeight
from "off"
to "on"
. However, those tries do not work.
I guess all it needed was fullScreenOffset: "30%"
, which I found here: https://www.themepunch.com/revsliderjquery-doc/slider-layout/
Image of the result: