web-dev-qa-db-ja.com

Jssorスライダー100％幅

jssor スライダーを100％幅で動作させようとしています（コンテナーの幅は70％です）。問題は、jssorがピクセルでのみ機能するため、100％の幅のslide_containerを使用すると、スライダーが機能しなくなることです。これを機能させる方法はありますか？

sliderwidthjssor
23
Reignbeaux

'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
38
jssor

jssor_slider1。$ ScaleWidth（Math.min（bodyWidth、1920））;

これでもスライダーは最大1920ピクセル幅に制限されます。したがって、私の大画面では、スライダーは100％の幅をカバーしていませんでした。そのため、その1920をより大きな数値に変更する必要がある場合があります。私は19200を使いました（最後に1つのゼロがすべて修正されました）。その値を調整すると、画面の幅全体に広がります。

7
George

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));
3
picobyte

誰かが気づいたように、スライダーの幅が親の幅よりも小さい場合に問題があります。 Chromeはスライダーの最大サイズを使用し、Firefoxは代わりに親を使用します。より良いコードを見つけたため、スライダーは全幅に伸びます。親幅を使用するように少し変更できます。またはウィンドウの幅。

どうすればJSSORのアスペクト比を変更できますか？

1
Zod

$ ResizeCanvasを探している人のために。最終的に、必要なスライダーサイズを$ ScaleSizeで取得するのに役立つ関数が追加されました。おかげでjssor

最新バージョン25.2.0では、$ ResizeCanvasの代わりに新しいメソッド$ ScaleSize（width、height）を追加しました。

（これは最初に投稿されました here ）

1
Ayush Agrawal