Question

我试图在网站上使用JSSOR滑块。我已经想出如何使它全宽，但现在它全部＆＃34;响应＆＃34; 所以它甚至可以缩放幻灯片的高度。我想要固定高度（400px）和100％宽度。我几乎实现了它，所以＆＃34; slider1_container＆＃34; 是全宽和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>

Answer 2

您有一个全屏显示滑块的示例。

http://www.jssor.com/testcase/full-screen-slider.source.html

这是我正在寻找的，但身高有限。我不希望图像的宽高比发生变化，但在全屏版本中，我希望它能够扩展以填充宽度，并简单地裁剪出不适合的内容。固定的高度。这可能吗？

Answer 3

您可以通过注释来修复轮播的高度 $（window）.bind（＆＃34; resize＆＃34;，ScaleSlider）;

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

3 个答案: