文章/答案/技术大牛

发布

问调整owl-carousel的高度
EN

Stack Overflow用户

提问于 2016-05-25 08:18:15

回答 2查看 27.7K关注 0票数 6

目前我在我的网站上使用的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
  })

jquery

html

css

owl-carousel

javascript

回答 2

Stack Overflow用户

发布于 2017-05-24 15:09:36

添加autoHeight:true它会将轮播的高度设置为auto。

请看下面的正确代码

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

票数 0

Stack Overflow用户

发布于 2017-05-24 15:24:53

根据放置在传送带中的图像，猫头鹰传送带通常具有不同的高度。要创建不会更改的height，您可以使用

autoHeight: true

这会根据轮播中最大的图像或项目来更改轮播的height。因此，计划是计算所有可见项目，并根据最高项目更改高度。完整的JS代码如下所示：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/37425930

复制

相似问题

问调整owl-carousel的高度
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整owl-carousel的高度EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问调整owl-carousel的高度
EN