Jquery не отрабатывает при изменении ширины браузера

Question

<script type="text/javascript">
  $(document).ready(function(){ 
       var parentWidth = ((document.documentElement.clientWidth)/4)*3;
       $('.banner').css({'width':''+parentWidth+''});
       $('.slider').css({'width':''+parentWidth+''});
       $('.single-item').slick();
      });
  </script>

Меняю ширину слайдера. При загрузке страницы все ок. Когда захожу в консоль браузера, тоже все работает, при изменении ширины браузера.
Но не работает, когда я просто меняю ширину браузера без консоли.

Answer 1

.ready() срабатывает когда DOM страницы полностью обработался, т.е. один раз.

Чтобы обрабатывать изменение размеров экрана, нужно использовать .resize() и применять его к $(window)

$(window).on('resize', function() {
  let parentWidth = $(document).width() / 4 * 3; // ((document.documentElement.clientWidth)/4)*3
  console.info(parentWidth);
  $('.banner, .slider').css('width', parentWidth+'px');
  $('.single-item').slick();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Чтобы код срабатывал и при загрузке DOM, и при изменение размера

function SlickResize() {
  let parentWidth = $(document).width() / 4 * 3; // ((document.documentElement.clientWidth)/4)*3
  console.info(parentWidth);
  $('.banner, .slider').css('width', parentWidth+'px');
  //$('.single-item').slick(); // Закомментим, чтобы не бил ошибками в консоль
}

$(document).ready(SlickResize);
$(window).on('resize', SlickResize);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

БЛОГ НА HUSL

Jquery не отрабатывает при изменении ширины браузера

Ответы (1 шт):