Jssor滑块：响应代码 [英] Jssor Slider: Responsive Code

问题描述

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

I am using the Jssor Slider (http://www.jssor.com/demos/slider-cluster.html). As the slides I have are huge (about 2000px in width), they will scale significantly on smaller devices (even iPad). I don't mind having the sides (left and right) to be cropped off symmetrically on smaller devices.

但是，发生的是滑块固定在左边在0px。
1）有没有我可以集中整个幻灯片容器？
2）并根据窗口/浏览器的高度缩放幻灯片容器？

However, what happens is that the slider is fixed on the left at 0px. 1) Is there anyway I can centralize the whole slide container? 2) And scale the slide container based on height of window/browser?

我没有引用这个，但是没有启发任何解决方案： Jssor滑杆100％宽度

I did reference this but doesn't inspire any solution: Jssor slider 100% width

任何人都可以帮助吗？

Anyone can help please? Thank you.

推荐答案

响应代码适合高度或宽度

responsive code to fit height or width

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

这篇关于Jssor滑块：响应代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！