1

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.

Community
  • 1
  • 1
Darren Bachan
  • 735
  • 2
  • 11
  • 30
  • It would be great if you can self-answer your question with what you found. But don't just add a link - describe everything you did and include just the code required to do this. – Cave Johnson Feb 06 '17 at 19:37
  • Also, did you see this question? It looks similar to what you were trying to do: https://stackoverflow.com/questions/28251644/disabling-owl-carousel-at-a-specific-viewport-width – Cave Johnson Feb 06 '17 at 19:39

2 Answers2

0

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.

Ikhlak S.
  • 8,578
  • 10
  • 57
  • 77
  • What if you want the items to show, but let's say like 3 columns. When on mobile, don't show it like this, but instead initialize carousel for 1 item per column and left/right navigation .. – trainoasis Jun 07 '18 at 08:03
0

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

you have to insert this css into your existing css

Aman Sharma
  • 11
  • 7