调整owl-carousel的高度
Posted
技术标签:
【中文标题】调整owl-carousel的高度【英文标题】：Adjust height of owl-carousel 【发布时间】：2016-09-22 09:30:51 【问题描述】：目前，我在我的网站中使用的 owl-carousel 太高了，因为它占用的空间超过了全屏。从每张幻灯片一张图像的 owl-carousel 演示中，似乎可以调整高度。我正在使用最新版本的owl carousel 2。我还尝试将carousel 包裹在另一个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> nesella@comcast.net <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
)
【问题讨论】：
是否可以将它放在带有所有 JS、CSS 和 HTML 代码的 jsfiddle 上？这将有助于解决问题。 【参考方案1】：猫头鹰轮播通常根据放置在轮播中的图像具有不同的高度。要创建一个不会更改的 height，您可以使用
autoHeight: true
这会根据轮播中最大的图像或项目更改轮播的height。所以计划是计算所有可见项目并根据最高项目更改高度。您的完整 JS 代码如下：
$("#carousel").owlCarousel(
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
autoHeight:true
)
【讨论】：
我可以限制 autoHeight 的最大高度吗？当它适合宽度时，它会将图像炸得太高。【参考方案2】：添加 autoHeight:true 它将轮播的高度设置为自动。
查看下面的正确代码
$("#carousel").owlCarousel(
autoplay: true,
items: 1,
loop: true,
navigation : true,
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true,
autoHeight:true
)
【讨论】：
我可以限制 autoHeight 的最大高度吗？当它适合宽度时，它会将图像炸得太高。以上是关于调整owl-carousel的高度的主要内容，如果未能解决你的问题，请参考以下文章
Owl-carousel 每个项目显示很多 3 个图像 - Laravel