How to make Owl Carousel work only on mobile

Question

I have the following html:

<div class="experience-items">
   <div class="experience-item">Lorem</div>
   <div class="experience-item">Lorem</div>
   <div class="experience-item">Lorem</div>
</div>

I want Owl Carousel to work only on mobile. I tried this, but it didn't work:

var checkWidth = $(window).width();
if (checkWidth > 699) {
  $('.experience-items').trigger('destroy.owl.carousel').removeClass('owl-carousel owl-loaded');
  $('.experience-items').find('.owl-stage-outer').children().unwrap();
} else 
  if (checkWidth < 700) {
    $carousel.owlCarousel();
    owl.on('initialized.owl.carousel', function(e) {});
  }

I felt like this was the closest to what I want to achieve, but the OP uses enquire.js, and I don't want to.

I found an example of what I want to achieve here , but I am not understanding the javascript behind it.

UPDATE I found the perfect example here . I won't close the topic in case someone else needs to see this. I am not sure exactly if the amount of javascript is needed, but I had to include it all and the .bp- classes to make it work.

Answer 1

This can be done with CSS media queries.

@media only screen and (min-width: 736px) {
  .experience-items{display:none;}
}

Note: We just use CSS to HIDE owl carousal.

Answer 2

 .experience-items{ display:block; } @media screen and (max-width:360px){ .experience-items{ display:block; } } 

you have to insert this css into your existing css