是否可能有固定高度的全宽JSSOR滑块？ [英] Is it possible to have full width JSSOR slider with fixed height?

问题描述

我试图在网站上使用JSSOR滑块。我已经知道如何使其全宽，但现在是所有响应，所以它缩放幻灯片的高度。我想要固定高度（400像素）和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

我欣赏

推荐答案

要缩放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>

这篇关于是否可能有固定高度的全宽JSSOR滑块？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！