Wie Owl Karussell nur auf mobilen

Ich habe folgende html arbeiten machen:Wie Owl Karussell nur auf mobilen

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

Ich will Owl Karussell nur auf Mobil arbeiten. Ich versuchte dies, aber es hat nicht funktioniert:

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

Ich fühlte mich wie this in der Nähe von war, was ich will erreichen, aber die OP verwendet enquire.js, und ich will nicht.

Ich fand ein Beispiel für das, was ich erreichen möchte here, aber ich verstehe nicht das Javascript dahinter.

UPDATE Ich fand das perfekte Beispiel here. Ich werde das Thema nicht schließen, falls jemand anderes dies sehen sollte. Ich bin mir nicht sicher, ob genau die Menge an Javascript benötigt wird, aber ich musste alles und die Klassen .bp- einbeziehen, damit es funktioniert.

Quelle

2017-02-06 Darren Bachan

Es wäre toll einzulegen, wenn Sie Ihre Frage mit Selbst beantworten können, was Sie gefunden haben. Aber fügen Sie nicht einfach einen Link hinzu - beschreiben Sie alles, was Sie getan haben und fügen Sie nur den Code hinzu, der dafür erforderlich ist. –

Haben Sie diese Frage auch gesehen? Es sieht ähnlich aus wie Sie es versucht haben: https://stackoverflow.com/questions/28251644/disabling-owl-carousel-at-a-specific-viewportwidth –

Dies kann mit CSS-Medienabfragen erfolgen.

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

Hinweis: Wir haben gerade CSS Eule carousal zu verbergen.

Quelle

2017-02-06 19:50:14 user3284463

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

Sie haben diese CSS in Ihre bestehende CSS

Quelle

2018-01-07 07:50:13

Wie Owl Karussell nur auf mobilen

Antwort

Verwandte Themen