Your video:
www.dmxzone.com/demo/HTML5ParallaxSlider2/Hotel/index.html

uses Data Bindings browser properties to allocate the Parallax Slider width & height according to the viewport size like so:

style="width:{{$BROWSER.viewportWidth}}px; height:{{$BROWSER.viewportWidth.between( 1200, 3000 ).then( 700, "" )}}{{$BROWSER.viewportWidth.between( 992, 1199 ).then( 530, "" )}}{{$BROWSER.viewportWidth.between( 768, 991 ).then( 400, "&quot}}{{$BROWSER.viewportWidth.between( 0, 767 ).then( 240, "" )}}px"

I've been trying to set this up to show the slider at full screen width like in the video, but having trouble using the Data Bindings formatter. I can bind the {{$BROWSER.viewportWidth}} to the width, but struggling with the height attribute.

Hello,
What do you mean by: "but struggling with the height attribute." ? What is the issue with the height attribute?

Not sure how to setup the Data Bindings formatting on the Slider height attribute - that's quite a complex nested conditional statement above. Where does one start? I tried using the same statement in my slider but it does not display.

Well, the same way you do it for the width - there should not be any difference.

Sorted now Teodor.
You have to select an HTML tag like <img> then format the img.width or img.height data bindings, then translate this code to the Parallax Slider width & height attributes.

I see that the slider should be wrapped in a container-fluid (no row or cell), then set margins & padding to zero in a custom css, so that the slider extends all the way across the browser window:

.container-fluid {
}
#slideshow-wrapper {
margin:0;
padding:0;
}

It would be a good idea to have a video tut on how to do this - not for me of course!