我有以下 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-
类才能使其正常工作。
最佳答案
这可以通过 CSS 媒体查询来完成。
@media only screen and (min-width: 736px) {
.experience-items{display:none;}
}
注意:我们只是使用 CSS 来隐藏 Owl Carousel 。
关于javascript - 如何使 Owl Carousel 仅在移动设备上运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42074965/