4

我正在使用 Jssor 滑块（http://www.jssor.com/demos/slider-cluster.html）。由于我的幻灯片很大（大约 2000 像素宽），它们将在较小的设备（甚至 iPad）上显着扩展。我不介意在较小的设备上对称地裁剪两侧（左侧和右侧）。

但是，发生的情况是滑块固定在左侧 0px 处。1）无论如何我可以集中整个幻灯片容器吗？2）并根据窗口/浏览器的高度缩放幻灯片容器？

我确实参考了这个，但没有激发任何解决方案：Jssor slider 100% width

任何人都可以帮忙吗？谢谢你。

4

3 回答 3

3

响应代码以适应高度或宽度

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var windowWidth = $(window).width();

    if (windowWidth) {
        var windowHeight = $(window).height();
        var originalWidth = jssor_slider1.$OriginalWidth();
        var originalHeight = jssor_slider1.$OriginalHeight();

        var scaleWidth = windowWidth;
        if (originalWidth / windowWidth > originalHeight / windowHeight) {
            scaleWidth = Math.ceil(windowHeight / originalHeight * originalWidth);
        }

        jssor_slider1.$ScaleWidth(scaleWidth);
    }
    else
        window.setTimeout(ScaleSlider, 30);
}

ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
于 2014-04-28T00:54:57.367 回答
2

re 1：这是一个让任何东西自动居中的技巧，

<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 u="slider1_container" style="...margin: 0 auto;..." ...>
        </div>
    </div>
</div>

re 2：您可以使用 api call 'jssor_slider1.$ScaleWidth(width)' 将滑块缩放到任何大小，因为 jssor 滑块始终保持纵横比，以使滑块适合窗口的高度，您可以检测窗口高度，然后计算宽度.

于 2014-04-26T11:28:17.680 回答
0

一般仅供参考：“margin: auto”是您水平居中大多数 HTML 元素的朋友。

于 2017-06-19T17:37:52.040 回答