如何让 Owl Carousel 只在手机上运行答案

【问题标题】：How to make Owl Carousel work only on mobile如何让 Owl Carousel 只在手机上运行
【发布时间】：2017-02-06 18:42:53
【问题描述】：

我有以下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- 类才能使其工作。

【问题讨论】：

如果您能用您发现的内容自行回答您的问题，那就太好了。但不要只是添加链接 - 描述您所做的一切并仅包含执行此操作所需的代码。
另外，你看到这个问题了吗？它看起来与您尝试执行的操作相似：stackoverflow.com/questions/28251644/…

标签： javascript jquery owl-carousel

【解决方案1】：

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

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

注意：我们只是使用 CSS 来隐藏 owl carousal。

【讨论】：

如果您希望显示项目怎么办，但假设是 3 列。在移动设备上时，不要这样显示，而是为每列 1 个项目和左/右导航初始化轮播 ..

【解决方案2】：

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

您必须将此 css 插入现有 css 中

【讨论】：