Is it possible to have full width JSSOR slider with fixed height?

Question

I'm trying to use JSSOR slider on a website. I already figured out how to make it full width but now it's all "responsive" so it scales even the height of the slide. I would like to have fixed height (400px) and 100% width. I almost achieved it so the "slider1_container" is full width and 400px height but the content of it is still responsive.

There's the website: http://carwash-horovice.cz

I appreciate any help you can give me.

Answer 1

To scale jssor slider, it will always keep aspect ratio. You cannot scale with without scaling height.

If you want to keep the original height, you can disable scaling by removing the following code.

    function ScaleSlider() {
        var parentWidth = $('#slider1_container').parent().width();
        if (parentWidth) {
            jssor_slider1.$ScaleWidth(parentWidth);
        }

        else
            $JssorUtils$.$Delay(ScaleSlider, 30);
    }

    ScaleSlider();
    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);

In addition, to keep your page responsive and keep the slider auto center, you can wrap the slider by a wrapper.

<div style="position: relative; width: 100%; overflow: hidden;">
    <div style="position: relative; left: 50%; width: 5000px; text-align: center; margin-left: -2500px;">

        <!-- use 'margin: 0 auto;' to auto center element in parent container -->
        <div id="slider1_container" style="...margin: 0 auto;..." ...>
        </div>

    </div>
</div>

Answer 2

You have an example with the slider at full screen.

http://www.jssor.com/testcase/full-screen-slider.source.html

This is what I'm looking for, but with a limited height. I don't want the aspect ratio of the images to change, but as in the full-screen version, I'd like it to expand to fill the width, and simply crop what doesn't fit within the fixed height. Is this possible?

Answer 3

You can fix the height of the carousel by commenting out $(window).bind("resize", ScaleSlider);