Javascript 如何使猫头鹰转盘仅在移动设备上工作

我有以下html：

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

洛勒姆
洛勒姆
洛勒姆

我希望猫头鹰转盘只能在移动设备上工作。我试过这个，但没用：

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

var checkWidth=$（窗口）.width（）；
如果（检查宽度>699）{
$（'.experience items'）.trigger（'destroy.owl.carousel'）.removeClass（'owl-carousel-owl-loaded'）；
$（'.experience items'）.find（'.owl stage outer'）.children（）.unwrap（）；
}否则
如果（检查宽度<700）{
$carousel.owlCarousel（）；
on（'initialized.owl.carousel'，函数（e）{}）；
}

我觉得这是最接近我想要实现的，但是OP使用enquire.js，我不想这样做

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

更新

---

我找到了一个完美的例子。我不会关闭这个主题，以防其他人需要看到这个。我不确定是否需要大量的javascript，但我必须包含所有javascript和

.bp-

类才能使其正常工作。

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

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

---

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

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

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

注意：我们只是使用CSS来隐藏猫头鹰狂欢节。

。体验项目{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：360px）{
.经验项目{
显示：块；
}
}

。体验项目{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：360px）{
.经验项目{
显示：块；
}
}

如果你能用自己的发现自我回答问题，那就太好了。但是，不要只是添加一个链接——描述你所做的一切，只包括完成这项工作所需的代码。还有，你看到这个问题了吗？它看起来和你想做的事情很相似：如果你能用你发现的自我回答问题，那就太好了。但是，不要只是添加一个链接——描述你所做的一切，只包括完成这项工作所需的代码。还有，你看到这个问题了吗？它看起来类似于您试图做的事情：如果您希望显示项目，那么该怎么办，但假设有3列。在移动设备上，不要这样显示，而是为每列1个项目和左/右导航初始化旋转木马。如果您希望项目显示，但假设为3列，该怎么办。在移动设备上时，不要这样显示，而是为每列1个项目和左/右导航初始化旋转木马。。