Jssor scale slider

Привет, я пытаюсь установить динамическую ширину (100% емкости) и статическую высоту (550 пикселей) слайдера на ПК. На мобильном устройстве он должен реагировать. Существует мой код:Jssor scale slider

<div class="col-md-6 right-col" id="sliders"> 
     <div id="slider0" style="position: relative; top: 0px; left: 0px; width: 712px; height: 550px; overflow: hidden; "> 
      <div u="slides" class="slides2" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 712px; height: 550px; overflow: hidden;"> 
       <div data-id="0"> 
        <img u="image" src='<?php echo get_template_directory_uri(); ?>/images/grey.gif' data-original="<?php echo get_template_directory_uri(); ?>/images/w1.jpg" /> 
       </div> 
       <div data-id="1"> 
        <img u="image" src='<?php echo get_template_directory_uri(); ?>/images/grey.gif' data-original="<?php echo get_template_directory_uri(); ?>/images/w2.jpg" /> 
       </div> 
       <div data-id="2"> 
        <img u="image" src='<?php echo get_template_directory_uri(); ?>/images/grey.gif' data-original="<?php echo get_template_directory_uri(); ?>/images/w3.jpg" /> 
       </div> 
      </div> 

      <span u="arrowleft" class="jssora13l" style="top: 123px; left: 0px;"> 
      </span> 
      <!-- Arrow Right --> 
      <span u="arrowright" class="jssora13r" style="top: 123px; right: 5px;"> 
      </span> 
     </div> 

    </div>

Вот что я пытался с ScaleWidth и высоте, но оно не идет с шириной 100% ..

function ScaleSlider() { 
      var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
      console.log(parentWidth); 
      if(parentWidth > 798){ 
       jssor_slider1.$ScaleWidth(Math.min(parentWidth, 954)); 
      }else if (parentWidth > 720 && parentWidth >= 797){ 
       jssor_slider1.$ScaleWidth(816); 
       jssor_slider1.$ScaleHeight(550); 
      } 
      else 
       window.setTimeout(ScaleSlider, 30); 

     }

Как я могу сделать, что мой слайдер всегда 100 % ширина контейнера и статическая высота 550 пикселей на ПК?

источник

2015-04-11 Zobo

Ползунок Jssor всегда сохраняет соотношение сторон в масштабе. Вы можете использовать либо $ScaleWidth, либо $ScaleHeight.

function ScaleSlider() { 
     var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth; 
     console.log(parentWidth); 
     if(parentWidth) { 
      if(parentWidth > 798){ 
       jssor_slider1.$ScaleWidth(Math.min(parentWidth, 954)); 
      } 
      else if (parentWidth > 720 && parentWidth >= 797) { 
       jssor_slider1.$ScaleWidth(816); 
      } 
      else { 
       jssor_slider1.$ScaleWidth(parentWidth); 
      } 
     } 
     else 
      window.setTimeout(ScaleSlider, 30); 

    }

источник

2015-04-11 21:06:22 jssor

Е. Я знаю это, но, когда я хочу, чтобы иметь на компьютере ширину 100% контейнера (самозагрузки Col-MD-6) и 550px высотой не более не менее чем на мобильном телефоне это не весы должным образом. Знаете ли вы, где проблема? – Zobo

Удалите 'jssor_slider1. $ ScaleHeight (550);' – jssor

Это не помогает, потому что, когда я удаляю его, он масштабируется на мобильных устройствах. – Zobo

function ScaleSlider() { 
     var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth; 
     var refSize1 = jssor_1_slider.$Elmt.parentNode.clientHeight; 
     if (refSize) { 
      refSize = Math.min(refSize, 830); 
      refSize1 = Math.min(refSize1, 617); 
      jssor_1_slider.$ScaleWidth(refSize); 
      jssor_1_slider.$ScaleHeight(refSize1); 
     } 
     else { 
      window.setTimeout(ScaleSlider, 30); 
     } 
    }

источник

2017-02-20 06:12:33

Jssor scale slider

ответ

Смежные вопросы