javascript - 如何使 Owl Carousel 仅在移动设备上运行

Question

我有以下 html:

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

我希望 Owl Carousel 仅在移动设备上运行。我尝试了这个，但没有成功:

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

我感觉像this是最接近我想要实现的目标，但 OP 使用 enquire.js，而我不想这样做。

我找到了一个我想要实现的示例 here ，但我不理解它背后的javascript。

更新我找到了完美的例子here 。我不会关闭这个主题，以防其他人需要看到这个。我不确定是否需要多少 JavaScript，但我必须将其全部包含在内以及 .bp- 类才能使其正常工作。

Answer 1

这可以通过 CSS 媒体查询来完成。

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

注意:我们只是使用 CSS 来隐藏 Owl Carousel 。