javascript - Is it possible to have full width JSSOR slider with fixed height? - Stack Overflow

admin管理员组

文章数量:1389838

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:

I appreciate any help you can give me.

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.

• javascript
• jquery
• css
• slider
• jssor

Share Improve this question Follow asked Aug 18, 2014 at 20:35 Jakub ŠtychJakub Štych 5311 silver badge33 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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>

You have an example with the slider at full screen.

http://www.jssor./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?

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

本文标签： javascriptIs it possible to have full width JSSOR slider with fixed heightStack Overflow