Ошибка изменения размера плагина Jquery Cycle при перетаскивании окна из узкого в широкий - PullRequest
Новая
       34

Ошибка изменения размера плагина Jquery Cycle при перетаскивании окна из узкого в широкий

0 голосов
/ 20 июня 2019

Я использую JQuery Cycle Plugin для изображений с шириной 100%.Я обнаружил, что получаю противоречивые результаты, когда загружаю или перезагружаю страницу с узкой шириной, а затем изменяю размер браузера до более широкой.Часто слайды остаются на более узкой ширине, когда они должны расширяться вместе со страницей.

Если я обновляю или загружаю с более широкой ширины, а затем изменяю размеры вниз и обратно, это поведение отсутствует.

Естественная ширина изображений составляет 882 пикселей.Я понимаю, что потеряю качество, если растяну их.Я заменю их, если это станет проблемой.

Что я могу сделать, чтобы размеры слайдов всегда менялись при изменении размера браузера или области просмотра?

СТИЛИ: 

  #home_cycle_wrapper{
    position: relative;
    width: 100%;
    min-height: 554px;
  }

  #mainPageCopy{
    border-left: 0px
    solid #ddd;
    position: absolute;
    top: 40px;
    left: 67%;
    z-index: 5;
    background-color: white;
    width: 27%;
    padding: 15px;
    color: black;
    font-size: 3vmin;
  }

JS: 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle/3.0.3/jquery.cycle.all.min.js"></script>
    <script type="text/javascript">
    $( document ).ready(function() {
        $('#home_cycle').cycle({    
        fit:           1,     
        fx:            'fade', 
        width: '100%',
   });
    });
  </script>

HTML SNIPPET 

    <div id="home_cycle_wrapper" >
    <div id="home_cycle" class="home_image_container">
      <img src="/images/main_harbour_island.jpg">
      <img src="/images/main_downtown2.jpg">
    </div>
    <div id="mainPageCopy" class="copy">
        <p>Lorem ipsum dolar sit amet blasai blah whosit can whatsamajigget...</p>
     </div>  
  </div>
...