Jssor滑块100%宽度

Question

我尝试使用100%宽度的jssor滑块(容器宽度为70%).问题是,jssor仅适用于像素,因此如果我使用宽度为100%的slide_container,则滑块不再起作用.有什么技巧可以让这个工作吗？

Answer 1

应始终使用固定像素指定'slide_container'的大小.原始大小是固定的,但您可以将滑块缩放到任何大小.

使用以下代码将滑块缩放到document.body的宽度.

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var bodyWidth = document.body.clientWidth;
    if (bodyWidth)
        jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 1920));
    else
        window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end

另外,您可以将滑块缩放到父元素的宽度,

var jssor_slider1 = new $JssorSlider$("slider1_container", options);

//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
    var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
    if (parentWidth)
        jssor_slider1.$ScaleWidth(Math.min(parentWidth, 1920));
    else
        window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();

$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end

Answer 2

jssor_slider1.$ ScaleWidth(Math.min(bodyWidth,1920));

这仍然限制滑块只有1920像素宽,最大.所以在我的大屏幕滑块上没有覆盖100%宽.因此,您可能需要将1920更改为更大的数字.我做了19200(最后一个零固定全部).一旦我调整了该值,它现在也会拉伸我屏幕的所有宽度.