調整貓頭鷹傳送帶的高度

目前，我在我的網站上使用的貓頭鷹傳送帶太高了，因爲它比全屏幕佔用的多。從每個幻燈片上的一個圖像的貓頭鷹傳送帶上的演示看來，可以調整高度。我正在使用最新版本的貓頭鷹傳送帶2.我也嘗試在另一個div中包裹傳送帶並調整外部div的高度。我注意到我可以調整寬度，這也有調整高度的效果。但是，我想調整高度而不調整寬度。我已附加了我的JavaScript和HTML。謝謝。調整貓頭鷹傳送帶的高度

<body> 
    <div id="navigation"> 
     <ul> 
     <li> <%= link_to "About", pages_about_path, id: "about-link"; %> </li> 
     <li> <%= link_to "Contact Us", pages_contact_us_path; %> </li> 
     </ul> 
    </div> 

    <div class="wrapper"> 


    <h1><img src="http://cdn-0.famouslogos.us/images/computer-logos/ab-computer-repair-logo.jpg"> </h1> 

     <div id="carousel" class="owl-carousel owl-theme"> 
      <div class="item"><img src="https://responsivedesign.is/__data/assets/image/0013/5017/Owl-Carousel-2.jpg"></div> 
      <div class="item"><img style="width:100%; height:auto;" src="http://www.pcgeeksusa.com/wp-content/uploads/2015/01/computer-repair.jpg"></div> 
     </div> 


     <div class="contact"> 
     <aside> 
      <h2>Contact Info</h2> 
      <p> Nomadic Inc. <br> 
       Tuscaloosa, AL 35404 <br> 
       <b> E-mail: </b> [email protected] <br> 
       <b> Phone: </b> 205-799-1668 

      </p> 
     </aside> 
     </div> 
    </div> 
</body>

和JavaScript：

$ -> 
    $("#carousel").owlCarousel({ 
    autoplay: true, 
    items: 1, 
    loop: true, 
    navigation : true, 
    slideSpeed : 300, 
    paginationSpeed : 400, 
    singleItem:true 
    })

來源

2016-05-25 BSpassky

是否有可能把這個的jsfiddle所有的JS，CSS和HTML代碼？這將有助於很多麻煩射擊。 – BigRedDog

添加autoHeight：真它將設置轉盤自動的高度。

看到正確的代碼

$("#carousel").owlCarousel({ 
    autoplay: true, 
    items: 1, 
    loop: true, 
    navigation : true, 
    slideSpeed : 300, 
    paginationSpeed : 400, 
    singleItem:true, 
    autoHeight:true 
})

來源

2017-05-24 07:09:35

貓頭鷹轉盤通常具有根據放置在轉盤的圖像不同的高度的下方。要創建一個height不會改變，你可以使用

autoHeight: true

根據轉盤內最大的圖像或項目這改變了轉盤的height。所以計劃是計算所有可見物品並根據最高物品改變高度。你的全JS代碼將如下所示：

$("#carousel").owlCarousel({ 
    autoplay: true, 
    items: 1, 
    loop: true, 
    navigation : true, 
    slideSpeed : 300, 
    paginationSpeed : 400, 
    singleItem:true 
    autoHeight:true 
})

來源

2017-05-24 07:24:52 Deathstorm

調整貓頭鷹傳送帶的高度

回答

相關問題