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

Question

[Костя]

Столкнулся со следущей проблемой, используя плагин bxSlider. Необходимо дописать в коде вызова плагина условие, которое меняет количество слайдов в карусели на 1 штуку для мобильных устройств.

Сейчас же имею следующую настройку плагина

$(document).ready(function(){
  $('.slider').bxSlider({
    slideWidth: 400,
    minSlides: 2 
  });
});

Суть в том, что при таком вызове плагина, у меня карусель на 2 слайда, что и требуется исправить для мобильных устройств.

Answer 1

[Dmitriy Mozgovoy]

Свойства дисплея хранятся в:

• screen.width
  
• screen.height
  
• screen.availWidth
  
• screen.availHeight
  

Либо $(document).width(), но тут может быть окно не на всю развернуто, как на windows планшетах...
Ну тогда количество слайдов:
count=Math.floor(screen.availWidth/slideWidth);
Либо

count=screen.availWidth>768 ? Math.floor(screen.availWidth/slideWidth): 1;

//на дисплеях менее 768px будет всегда 1 слайд, а на больших - количество считается по факту
Или просто 1-2
count=screen.availWidth>768 ? 2 : 1;

Answer 2

[Sergey]

Так подходит?

$(document).ready(function(){
  $('.slider').bxSlider({
      slideWidth: 400,
      maxSlides: 2,
      minSlides: 1
    });
});

Comments

[Костя]

пробовал так, не правильно себя слайдер ведет

[Sergey]

Костя: codepen.io/BaskSerg/pen/MKXzrN

Answer 3

[Григорий]

Медиа-запросы можно применять прямо в js

var mobile = window.matchMedia( "(max-width: 768px)" );
if (mobile.matches) {
 // если маленький экран
 $('.slider').bxSlider({
      ...
  });
} else {
 // иначе
 $('.slider').bxSlider({
    ...
  });
}