jssorはメディアクエリに応じて高さを変更します

ビューポートの幅に応じてjssorスライダの高さを変更して、スライドのHTMLを確実に読み取ることができます。私はScaleSlider関数を使って、デスクトップブレークポイントとタブレットブレークポイントからスライダを拡大/縮小しています。そして、移動ブレークポイント（480ピクセル以下）にいるとき、スライダのサイズを100％幅に変更し、別の高さ最初の幅と高さまで）。jssorはメディアクエリに応じて高さを変更します

それが機能するようにする唯一の方法は、ページをリロードすることである（==再初期化jssor）

CSS

.sliderContainer{ 
    width: 1180px; 
    height: 680px; 
    position: relative; 
    overflow: hidden; 
    @media screen and (max-width: $media-basicmobile-max){ 
     width: 300px; 
     height: 425px; 
    } 
    .slides { 
     width:1180px; 
     height: 680px; 
     position: absolute; 
     overflow: hidden; 
     @media screen and (max-width: $media-basicmobile-max){ 
      width: 300px; 
      height: 425px; 
     } 
    } 
}

任意のアイデア？スライダのHTMLコンテンツを複製し、ウィンドウのサイズが変更されたときにスライダを初期化することがあります。

出典

2017-06-09 Carlos Ferragut

ブレークポイントでラッパーを定義し、ウィンドウのサイズ変更中にラッパー領域全体をカバーするようにスライダーをスケーリングできます。次の例を参照してください。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Full Screen Slider Cover Window - Jssor Slider</title> 
    <style> 
     html, body { 
      margin: 0px; 
      padding: 0px; 
      width: 100%; 
      height: 100%; 
      background: #fff; 
     } 

     #wrapper { 
      margin: 0 auto; 
      width: 1180px; 
      height: 680px; 
      max-width: 100%; 
      position: relative; 
      overflow: hidden; 
     } 

     @media screen and (max-width: 500px) { 
      #wrapper { 
       width: 300px; 
       height: 425px; 
      } 
     } 
    </style> 
</head> 
<body> 
    <script type="text/javascript" src="../js/jssor.slider.min.js"></script> 

    <script> 
     jssor_slider1_init = function() { 

      var options = { 
       $SlideDuration: 800,     //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500 
       $DragOrientation: 1,     //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $Cols is greater than 1, or parking position is not 0) 
       $AutoPlay: 1,       //[Optional] Auto play or not, to enable slideshow, this option must be set to greater than 0. Default value is 0. 0: no auto play, 1: continuously, 2: stop at last slide, 4: stop on click, 8: stop on user navigation (by arrow/bullet/thumbnail/drag/arrow key navigation) 
       $Idle: 1500       //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000 
      }; 

      var sliderContainerElement = document.getElementById("slider1_container"); 
      var jssor_slider1 = new $JssorSlider$(sliderContainerElement, options); 

      //#region responsive code begin 
      //remove responsive code if you don't want the slider to scale along with window 
      function ScaleSlider() { 
       var wrapperElement = document.getElementById("wrapper"); 
       var wrapperWidth = wrapperElement.clientWidth; 

       if (wrapperWidth) { 
        var wrapperHeight = wrapperElement.clientHeight; 

        var originalWidth = jssor_slider1.$OriginalWidth(); 
        var originalHeight = jssor_slider1.$OriginalHeight(); 

        if (originalWidth/wrapperWidth > originalHeight/wrapperHeight) { 
         jssor_slider1.$ScaleHeight(wrapperHeight); 
        } 
        else { 
         jssor_slider1.$ScaleWidth(wrapperWidth); 
        } 

        //adjust vertical position 
        var scaleHeight = jssor_slider1.$ScaleHeight(); 
        sliderContainerElement.style.top = ((wrapperHeight - scaleHeight)/2) + "px"; 
       } 
       else 
        window.setTimeout(ScaleSlider, 30); 
      } 

      ScaleSlider(); 

      $Jssor$.$AddEvent(window, "load", ScaleSlider); 
      $Jssor$.$AddEvent(window, "resize", ScaleSlider); 
      $Jssor$.$AddEvent(window, "orientationchange", ScaleSlider); 
      //#endregion responsive code end 
     }; 
    </script> 

    <div id="wrapper"> 
     <div style="position: absolute; left: 50%; margin-left: -2500px; width: 5000px; text-align: center;"> 
      <!-- Jssor Slider Begin --> 
      <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
      <div id="slider1_container" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 600px; height: 300px;"> 

       <!-- Loading Screen --> 
       <div data-u="loading" style="position:absolute;top:0px;left:0px;background:url('../img/loading.gif') no-repeat 50% 50%; background-color: rgba(0, 0, 0, .7);"></div> 

       <!-- Slides Container --> 
       <div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 600px; height: 300px; 
      overflow: hidden;"> 
        <div> 
         <img u=image src="../img/landscape/01.jpg" /> 
        </div> 
        <div> 
         <img u=image src="../img/landscape/02.jpg" /> 
        </div> 
        <div> 
         <img u=image src="../img/landscape/03.jpg" /> 
        </div> 
        <div> 
         <img u=image src="../img/landscape/04.jpg" /> 
        </div> 
       </div> 

       <!-- Trigger --> 
       <script> 
        jssor_slider1_init(); 
       </script> 
      </div> 
      <!-- Jssor Slider End --> 
     </div> 
    </div> 

    <!-- remove the following if no need--> 
    <p>other content</p> 
</body> 
</html>

出典

2017-06-10 00:06:29 jssor

jssorはメディアクエリに応じて高さを変更します

答えて

関連する問題