want to make the revolution slider's height dynamic based on jQuery(window).height()

问题

well am developing site called http://promomakerz.com/new i wanna change the revolution slider's height it depends on the

jQuery(window).height -jQuery('.navbar').height();

so i used made my jquery hacks to do so with this code

        jQuery(window).on('load resize',function(){
            var height_left = jQuery(window).height()-jQuery('.navbar').height();
            jQuery('#rev_Slider').css({height:height_left+'px'});
            jQuery('#rev_slider_1_1').css({height:height_left+'px'});
            jQuery('#rev_slider_1_1_wrapper').css({height:height_left+'px'});
            console.log("Slider Changed Successfully");
        });

and it did work but it reverse itself to the height written in the admin panel

guys am trying to fix this issue 2 days ago and its still on please help

回答1:

oh my god !!!! thank god i've found the solution using the API its little bit tricky but it worked super fine <3

solution :-

var api = revapi1; // the one refers to the slider id 
var height_left = jQuery(window).height()-jQuery('.navbar').height();
var sliderSettings = api.data('opt') || api[0].opt;
console.log(sliderSettings); // here u can see slider revapi1's settings
sliderSettings.height = height_left;
sliderSettings.conh = height_left;
sliderSettings.ulh = height_left;
sliderSettings.gridheight[0] = height_left;

回答2:

Perfect thank you but I had to use a timeout for that it worked well

function resizeSlider() {
    var api = revapi1;
     var windowHeight = $(window).height();
     var height_left = windowHeight -  $('header.site-header').height() - $('#uid_581031dff187267690e9823b9a5b565a').height();  
     var sliderSettings = api.data('opt') || api[0].opt;
     //console.log(sliderSettings);
     setTimeout(function() {
        sliderSettings.height = height_left;
        sliderSettings.conh = height_left;
        sliderSettings.ulh = height_left;
        sliderSettings.gridheight[0] = height_left;
    },250);
}
$(window).resize(function(){
    resizeSlider();     
});
resizeSlider();

回答3:

The official offset-option could also work:

jQuery('#rev_slider_1').show().revolution({

    sliderLayout: 'auto',

    /* OFFSET SLIDER BY THE HEIGHT OF AN ELEMENT */
    fullScreenOffsetContainer: ".navbar",

    /* options continued .... */

来源：https://stackoverflow.com/questions/46840441/want-to-make-the-revolution-sliders-height-dynamic-based-on-jquerywindow-heig

标签

javascript

jquery

wordpress

revolution-slider