Почему скрипт работает не корректно, в чем ошибка?

Question

[Харви Спектр]

Привет! Подскажите пожалуйста, Нужно, чтобы при разрешении меньше 900 к элементам применялись эффекты карусели, а больше 900 чтобы карусель не работала. Есть код

spoiler

jQuery(document).ready(function () {
  
  function mobile() {
    var checkWidth = $(window).width();
    var demo = $("#carousel-0");
    var demo1 = $("#carousel-1");
    var demo2 = $("#carousel-2");
    if (checkWidth > 901) {
      demo.data('owlCarousel').destroy(); 
      demo.removeClass('owl-carousel');
      demo1.data('owlCarousel').destroy(); 
      demo1.removeClass('owl-carousel');
      demo2.data('owlCarousel').destroy(); 
      demo2.removeClass('owl-carousel');
    } else if (checkWidth < 900) {
      demo.owlCarousel({
        singleItem:true,
        navigation : true,
    navigationText : ["<",">"],
      });
      demo1.owlCarousel({
        singleItem:true,
        navigation : true,
    navigationText : ["<",">"],
      });
      demo2.owlCarousel({
        singleItem:true,
        navigation : true,
    navigationText : ["<",">"],
      });
    }
  }
 
  $(window).resize(mobile);

});

Он работает, но только если немного изменить ширину окна. Если открыть сайт сразу с разрешением ниже 900, то ничего не происходит, если немного двинуть границу окна - сразу применяются стили карусели. Что нужно дописать или изменить, чтобы работало сразу?

Answer 1

[Сергей]

попробуйте

if (checkWidth >= 901)
else if (checkWidth <= 900)

+ попробуйте запускать функцию mobileне по событие resizeа сразу при загрузке страницы
mobile()

Answer 2

[slii]

Потому что вы вызываете функцию mobile() , только при resize - изменении экрана.
После jQuery(document).ready(function () { пропишите mobile(); - это должно решить проблему

Comments

[Харви Спектр]

Заработало, спасибо большое!