如何讓貓頭鷹旋轉木馬只在移動

工作，我有以下的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) {}); 
    }

我覺得this是最接近我想要實現的，但OP使用enquire.js，我不想。

我找到了一個我想實現的例子here，但我並不理解它背後的javascript。

UPDATE 我找到了一個完美的例子here。如果其他人需要查看，我不會關閉該主題。我不確定是否需要JavaScript的數量，但我必須包括它和.bp-類使其工作。

來源

2017-02-06 Darren Bachan

這將是巨大的，如果你可以用你發現了什麼自我回答你的問題。但是不要只是添加一個鏈接 - 描述你所做的一切，只包括完成這些所需的代碼。 –

另外，你有沒有看到這個問題？它看起來類似於您正在嘗試執行的操作：https://stackoverflow.com/questions/28251644/disabling-owl-carousel-at-a-specific-viewport-width –

這可以通過CSS媒體查詢完成。

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

注意：我們只是使用CSS來隱藏貓頭鷹carousal。

來源

2017-02-06 19:50:14 user3284463

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

你有這個CSS插入到現有的CSS

來源

2018-01-07 07:50:13

如何讓貓頭鷹旋轉木馬只在移動

回答

相關問題