Jssor 滑块 100% 宽度 [英] Jssor slider 100% width

问题描述

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

I try to get a jssor slider working with 100% width (the container has a width of 70%). The problem is, that jssor only works with pixels, so if I use a slide_container with a width of 100%, the slider doesn't work any more. Is there any trick how to get this working?

推荐答案

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

size of 'slide_container' should be always specified with fixed pixels. the original size is fixed then, but you can scale the slider to any size.

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

use following code to scale the slider to width of 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

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

also, you can scale the slider to width of parent element,

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

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