Определить размер окна для запуска различных атрибутов

Question

Я ищу, чтобы изменить параметры bxslider, в зависимости от размера области просмотра. Тем не менее, я бы хотел, чтобы это работало, если пользователь изменяет размер своего браузера (или поворачивает свое мобильное устройство). Пока у меня есть следующий код ниже, который запускает соответствующую функцию. Однако это не определяет размер переразмера? Как я могу это обнаружить? Кроме того, у меня есть определенный путь Я бег функции, которые я использую (только если элемент существует на странице и т.д., так что между комментариями, где я требую моего кода.)

clientsSlider: function() { 
     if ($('.clients').length) { 


      // 

      if($(window).width() >= 1024){ 
       $('.bxslider').bxSlider({ 
        minSlides: 4, 
        maxSlides: 4, 
        slideWidth: 170, 
        slideMargin:100, 
        responsive: true 
       }); 
      } 

      if($(window).width() <= 1024){ 
       $('.bxslider').bxSlider({ 
        minSlides: 2, 
        maxSlides: 2, 
        slideWidth: 170, 
        slideMargin:50, 
        responsive: true 
       }); 
      } 

      //          
     } 
    } 

Answer 1

Вы можете использовать resize метод JQuery для обнаружить изменение размеров окна:

$(window).resize(function() { 
    if($(window).width() >= 1024){ 
     $('.bxslider').bxSlider({ 
      minSlides: 4, 
      maxSlides: 4, 
      slideWidth: 170, 
      slideMargin:100, 
      responsive: true 
     }); 
    } else { 
     $('.bxslider').bxSlider({ 
      minSlides: 2, 
      maxSlides: 2, 
      slideWidth: 170, 
      slideMargin:50, 
      responsive: true 
     }); 
    } 
}); 

Кстати, вы не должны использовать> = и < = 1024 в вашем если заявления, как и будет выполняться, если ширина 1024px. Остальное в моем коде выше достаточно