Jssorスライダで親の高さと幅の両方を埋める

Question

親ノードの寸法（高さと幅の両方）を常に保持するようにします。このコードでは、幅を埋めるだけですが、主に応答性の高い使用を避けるために、高さを調整します。

var jssor_1_SlideshowTransitions = [ 
     {$Duration:500,$Delay:30,$Cols:8,$Rows:4,$Clip:15,$SlideOut:true,$Formation:$JssorSlideshowFormations$.$FormationStraightStairs,$Assembly:2049,$Easing:$Jease$.$OutQuad}, 
    ]; 

    var jssor_1_options = { 
     $AutoPlay: 1, 
     $SlideshowOptions: { 
      $Class: $JssorSlideshowRunner$, 
      $Transitions: jssor_1_SlideshowTransitions, 
      $TransitionsOrder: 1 
     }, 
     $ArrowNavigatorOptions: { 
      $Class: $JssorArrowNavigator$ 
     }, 
     $BulletNavigatorOptions: { 
      $Class: $JssorBulletNavigator$ 
     } 
    }; 

    var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options); 

    /*#region responsive code begin*/ 

    var MAX_WIDTH = 3000; 

    function ScaleSlider() { 
     var containerElement = jssor_1_slider.$Elmt.parentNode; 
     var containerWidth = containerElement.clientWidth; 

     if (containerWidth) { 

      var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth); 

      jssor_1_slider.$ScaleWidth(expectedWidth); 
     } 
     else { 
      window.setTimeout(ScaleSlider, 30); 
     } 
    } 



    ScaleSlider(); 

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

Answer 1

新しいAPIメソッド$ScaleSizeを使用してください。

var MAX_WIDTH = 3000; 
var MAX_HEIGHT = 3000; 

function ScaleSlider() { 
    var containerElement = jssor_1_slider.$Elmt.parentNode; 
    var containerWidth = containerElement.clientWidth; 
    var containerHeight = containerElement.clientHeight; 

    if (containerWidth) { 
     var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth); 
     var expectedHeight = Math.min(MAX_HEIGHT || containerHeight, containerHeight); 

     jssor_1_slider.$ScaleSize(expectedWidth, expectedHeight); 
    } 
    else { 
     window.setTimeout(ScaleSlider, 30); 
    } 
}