Как сделать Сова 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 СПРЯТАТЬ сова пирушка.

Answer 2

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

вы должны вставить этот CSS в существующий CSS