Why the script does not work correctly, what is the error?

Question

JavaScript

Hey! Please tell me, it is necessary that when the resolution is less than 900, carousel effects are applied to the elements, and more than 900 so that the carousel does not work. There is a code

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);

});

It works, but only if you change the width of the window a little. If you open the site immediately with a resolution below 900, then nothing happens, if you move the window border a little, the carousel styles are immediately applied. What needs to be added or changed to work right away?

Answer 1

try

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

+ try to run the function mobilenot on an event, resizebut immediately on page load
mobile()