Is it possible to have full width JSSOR slider wit

2019-04-09 05:34发布

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.

3条回答
The star\"
2楼-- · 2019-04-09 05:51

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>
查看更多
闹够了就滚
3楼-- · 2019-04-09 05:57

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

查看更多
神经病院院长
4楼-- · 2019-04-09 06:03

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?

查看更多
登录 后发表回答