Question

我尝试让jssor滑块以100％宽度工作（容器的宽度为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（最后一个零固定全部）。一旦我调整了该值，它现在也会拉伸我屏幕的所有宽度。

Answer 3

使用Bootstrap，如果您在X列div内有Jssor，例如col-lg-12：

jssor_slider1.$ScaleWidth(
   Math.max(
      Math.min
       (parseInt($(".col-lg 12").css("width").replace("px", "")) -  
       (parseInt($(".col-lg-12").css("padding-left").replace("px", "")) + 
       parseInt($(".col-lg-12").css("padding-right").replace("px","")))),100));

Answer 4

有人注意到，当滑块的宽度小于其父宽度时，会出现问题。 Chrome使用滑块的最大大小，而Firefox则使用父级。我找到了更好的代码，因此滑块将拉伸到全宽。您可以稍微修改它以使用父宽度或窗口宽度。

How can I make JSSOR change its aspect ratio?

Answer 5

对于任何寻找$ ResizeCanvas的人。他们最终添加了一个函数，可以帮助获得$ ScaleSize所需的滑块大小。谢谢你的陪审员

对于最新版本25.2.0，我们添加了一个新方法$ ScaleSize（width，高度）而不是$ ResizeCanvas。

（这是第一次发布here）

Jssor滑块100％宽度

5 个答案: