是否可以使用固定高度的全宽 JSSOR 滑块?

2022-01-24 00:00:00 slider jquery javascript css jssor

我正在尝试在网站上使用 JSSOR 滑块.我已经想出了如何让它全宽，但现在它都是 响应式"，所以它甚至可以缩放幻灯片的 高度.我想要 固定高度 (400px) 和 100% 宽度.我几乎做到了，所以 "slider1_container" 是全宽和 400px 高，但它的内容仍然是响应式的.

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.

有网站:http://carwash-horovice.cz

感谢您能给我的任何帮助.

I appreciate any help you can give me.

推荐答案

要缩放 jssor 滑块，它会始终保持纵横比.不缩放高度就无法缩放.

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>

相关文章