title: How to disable owl-carousel on desktop and enable on mobile device
body: <p>I am using the owl-carousel plugin(<a href="https://owlcarousel2.github.io/OwlCarousel2/" rel="nofollow noreferrer">https://owlcarousel2.github.io/OwlCarousel2/</a>). I want to disable the owl-carousel on the desktop so that my all content will display in a line and enable on the mobile device so my content will slide one by one. I tried some code but it is not working.</p>
  
  <p>Would you help me out in this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $("#owl_about_main_slider").owlCarousel({
        navigation : true, // Show next and prev buttons
        slideSpeed : 500,
        margin:10,
        paginationSpeed : 400,
        autoplay:true,
        items : 1, 
        itemsDesktop : false,
        itemsDesktopSmall : false,
        itemsTablet: false,
        itemsMobile : false,
        loop:true,
        nav:true,
        navText: ["&lt;i class='fa fa-angle-left' aria-hidden='true'&gt;&lt;/i&gt;","&lt;i class='fa fa-angle-right' aria-hidden='true'&gt;&lt;/i&gt;"]
    });
     });
  
  
    $(function() {
      var owl = $('.owl-carousel'),
          owlOptions = {
              loop: false,
              margin: 10,
              responsive: {
                  0: {
                      items: 1
                  }
              }
          };
  
      if ( $(window).width() &lt; 854 ) {
          var owlActive = owl.owlCarousel(owlOptions);
      } else {
          owl.addClass('off');
      }
  
      $(window).resize(function() {
          if ( $(window).width() &lt; 854 ) {
              if ( $('.owl-carousel').hasClass('off') ) {
                  var owlActive = owl.owlCarousel(owlOptions);
                  owl.removeClass('off');
              }
          } else {
              if ( !$('.owl-carousel').hasClass('off') ) {
                  owl.addClass('off').trigger('destroy.owl.carousel');
                  owl.find('.owl-stage-outer').children(':eq(0)').unwrap();
              }
          }
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body{
     margin: 0;
     padding: 0;
     height: 100%;
    }
  body .owl-nav div{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  border:1px solid #000;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  }
  body .owl-prev{
    left: 0;
    display: flex;
  }
  body .owl-next{
    right: 0;
    display: flex;
  }
  body .owl-prev i, body .owl-next i{
    margin: auto;
  }
  #owl_about_main_slider div h2{
  text-align: center;
  }
  .owl-carousel.off {
      display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.theme.default.min.css"&gt;
        &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"&gt;
  &lt;script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="owl_about_main_slider" class="owl-carousel"&gt;
      &lt;div&gt;&lt;h2&gt;This is First Slider&lt;/h2&gt;&lt;/div&gt;
      &lt;div&gt;&lt;h2&gt;This is Second Slider&lt;/h2&gt;&lt;/div&gt;
      &lt;div&gt;&lt;h2&gt;This is Third Slider&lt;/h2&gt;&lt;/div&gt;
      &lt;div&gt;&lt;h2&gt;This is Fourth Slider &lt;/h2&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>