terehin_k
@terehin_k
frontend developer

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

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

Сейчас же имею следующую настройку плагина
$(document).ready(function(){
  $('.slider').bxSlider({
    slideWidth: 400,
    minSlides: 2 
  });
});

Суть в том, что при таком вызове плагина, у меня карусель на 2 слайда, что и требуется исправить для мобильных устройств.
31c66535e3ee4bb9877ec0a19388fc81.jpg
  • Вопрос задан
  • 199 просмотров
Пригласить эксперта
Ответы на вопрос 2
DIITHiTech
@DIITHiTech
Fullstack javascript developer
Свойства дисплея хранятся в:
  • 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;
Ответ написан
Комментировать
baskserg
@baskserg
Better skills, better life.
Так подходит?
$(document).ready(function(){
  $('.slider').bxSlider({
      slideWidth: 400,
      maxSlides: 2,
      minSlides: 1
    });
});
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы