时间戳

首页 > 解决方案 > 如何在调整窗口大小时在 owl-carousel 中获得 div 高度？

jquery - 如何在调整窗口大小时在 owl-carousel 中获得 div 高度？

问题描述

我在一个项目中使用owl-Carousel，我需要owlCarousel 内的内容div（topSlidetxt）的高度来调整窗口大小和加载窗口，我已经尝试过了，但还没有得到任何积极的结果。

$('.heroSlide').owlCarousel({
  smartSpeed: 1500,
  items: 1,
  margin:0,
  nav:true,
  dots:true
});

<div class="heroSlide owl-carousel">
  <div class="item">
    <div class="row align-items-center">
      <div class="col-lg-7">
        <div class="topSlideImg">
          <img src="assets/images/home-banner-1.jpg" alt="">
        </div>
      </div>
      <div class="col-lg-5">
        <div class="topSlidetxt">
        <span class="tiTle">South Beach Residences</span>
        <h2>Icon to Many, Home to Few</h2>
        <a class="linkArrow" href="#">DISCOVER MORE</a>
      </div>
    </div>
  </div>
</div>
</div>

标签： jqueryowl-carousel

解决方案

您应该使用Owl Carousel 2的API 事件（initialized.owl.carousel，resized.owl.carousel）

使用示例：

$('.heroSlide').owlCarousel({
  smartSpeed: 1500,
  items: 1,
  margin:0,
  nav:true,
  dots:true,
  onInitialized: function () { /* read and use $('.topSlidetxt').height() here */ },
  onResized: function () { /* read and use $('.topSlidetxt').height() here */ },
});

现场示例代码：https ://jsfiddle.net/cichy380/sna04L7p/

推荐阅读