0
<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>

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

1
  • Привяжите к событию онресайз.
    – Quazimorda
    8 окт 2020 в 8:49

1 ответ 1

3

.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>

1
  • 1
    Я бы оставил срабатывание и для document.ready()
    – Quazimorda
    8 окт 2020 в 8:58

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.