Jssor slider different height on landscape

Question

I would like to change the height of a 'Nearby Image Partial Visible Slider' in landscape mode, because otherwise the slider is to tall and you have to scoll to much to see the whole image.

I'm using media queries to change the #slider1_container height on landscape mode and all the elements inside the #slider1_container scale ok; but the div#slider1_container height doesn't change, so a white space appears below the images.

I need a function that will scale the #slider1_container like it normally does, but it will give it a height of 1000px for portrait mode and 500px for landscape mode. This is the code:

jQuery(document).ready(function($) {
    var options = {
        $AutoPlay: false,
        $PauseOnHover: 1, //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false
        $ArrowKeyNavigation: true, //Allows arrow key to navigate or not
        $SlideWidth: 800, //[Optional] Width of every slide in pixels, the default is width of 'slides' container
        //$SlideHeight: 300,                                  //[Optional] Height of every slide in pixels, the default is width of 'slides' container
        $SlideSpacing: 0, //Space between each slide in pixels
        $DisplayPieces: 2, //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
        $ParkingPosition: 100, //The offset position to park slide (this options applys only when slideshow disabled).
        $ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
            $Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
            $ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
            $AutoCenter: 2, //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
            $Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
        }
    };
    var jssor_slider1 = new $JssorSlider$("slider1_container", options);
    //responsive code begin
    
    function ScaleSlider1() {
        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
        if(parentWidth) jssor_slider1.$ScaleWidth(Math.min(parentWidth, 2000));
        else window.setTimeout(ScaleSlider1, 30);
    }
    ScaleSlider1();
    $(window).bind("load", ScaleSlider1);
    $(window).bind("resize", ScaleSlider1);
    $(window).bind("orientationchange", ScaleSlider1);
    });

And this is the style:

.slider1_container {
    position: relative;
    top: 0px;
    left: 0px;
    width: 1000px;
    height: 1000px;
    overflow: hidden;
}
.slider1_container .slides {
    cursor: move;
    position: absolute;
    left: 0px;
    top: 0px;
    width: 1000px;
    height: 1000px;
    overflow: hidden;
}
@media all and (orientation: landscape) {
    .slider1_container {
      position: relative;
      top: 0px;
      left: 0px;
      width: 1000px;
      height: 500px;
      overflow: hidden;
   }
   .slider1_container .slides {
      cursor: move;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1000px;
      height: 500px;
      overflow: hidden;
   }
}

Updated code that fixed the problem

<div class="sliderWrapperPadding">
    <div class="sliderWrapperAbsolute">
        <div id="slider1_container">
            ...
        </div>
    </div>
</div>
<style>
    .sliderWrapperPadding {
        width: 100%;
        display: inline-block;
        position: relative;
        clear: both;
        padding-top: 100%;
    }
    .sliderWrapperAbsolute {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .slider1_container {
        position: relative;
        top: 0px;
        left: 0px;
        width: 1000px;
        height: 1000px;
        overflow: hidden;
    }
    @media all and (orientation:landscape) {
        .sliderWrapperPadding {
            padding-top: 50%;
        }
        .slider1_container {
            width: 1000px;
            height: 500px;
        }
</style>