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

Question

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

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

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

Answer 1

要缩放 jssor 滑块，它将始终保持宽高比。如果不缩放高度，则无法缩放。

如果您想保持原始高度，可以通过删除以下代码来禁用缩放。

    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);

此外，为了保持页面响应并保持滑块自动居中，您可以用包装器包裹滑块。

<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>