23

我尝试让jssor滑块以 100% 的宽度工作（容器的宽度为 70%）。问题是，jssor 只适用于像素，所以如果我使用宽度为 100% 的 slide_container，滑块将不再工作。有什么技巧可以让它工作吗？

4

5 回答 5

38

'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
于 2014-02-04T00:38:26.847 回答
7

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

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

于 2015-03-29T10:59:39.297 回答
3

X使用 Bootstrap，如果您在列中有 Jssor div，例如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));
于 2015-10-11T18:18:02.643 回答
1

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

我怎样才能让 JSSOR 改变它的纵横比？

于 2016-07-12T15:10:56.347 回答
1

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

对于最新版本 25.2.0，我们添加了一个新方法 $ScaleSize(width, height) 而不是 $ResizeCanvas。

（这是第一次在这里发布）

于 2017-08-31T00:51:56.980 回答