1

想象一下，您有一个位于页面绝对顶部的单个项目轮播。在此之下，您拥有其余的内容。由于轮播在页面中任意嵌套，因此您已将其设置为绝对定位。但是现在您需要知道轮播的高度，以便您可以在其余内容上放置一个上边距，使其不会重叠。这就是我正在做的事情。

$('#carousel').owlCarousel({
  items: 1,
  onInitialized: adjustStretchHeader,
  onResized: adjustStretchHeader
});

function adjustStretchHeader () {
  setTimeout(function () {
    return $('.page > .container')
      .css('margin-top', $('.page > .stretch-header')
        .height() + 15);
  }, 250);
}

在轮播的初始化和调整大小事件中，我得到它来获取轮播的高度并更新上边距。问题是，没有延迟，initialized事件在轮播完全绘制在页面上之前触发，因此高度不可靠。

随着延迟，我能够正确地得到它。但这显然是一种 hack，我不能保证在较慢的设备上，轮播会及时绘制。

我在文档中看不到任何其他有用的事件。

演示小提琴

4

3 回答 3

2

您可以使用 jQuery 的get()方法来获取图像的高度（即使它们被隐藏）。这与 owlCarousel 无关，因此不必等待它完成加载！

var images = $('#carousel img');
var firstImgHeight = images.get(0).height;
$('.page > .container').css('margin-top', firstImgHeight + 15);
于 2016-04-21T17:22:51.393 回答
1

浏览文档和演示，我找到了这个页面：http ://www.owlcarousel.owlgraphic.com/demos/events.html

它表明该onRefreshed事件是onInitialized在图像加载之后和之后调用的。你可以用那个。

$('#carousel').owlCarousel({
  items: 1,
  onRefreshed: adjustStretchHeader
});

function adjustStretchHeader () {
    return $('.page > .container')
      .css('margin-top', $('.page > .stretch-header')
        .height() + 15);
}

小提琴

虽然，我同意文档并不擅长解释事件的流程。这对我来说仍然像一个黑客。

于 2016-04-21T16:27:25.107 回答
0

轮播初始化后，图像的 DOM 具有宽度，但在实际加载图像之前它们没有高度。尝试使用（宽度）*（纵横比）而不是高度。

function adjustStretchHeader() {
  return $('.page > .container')
    .css('margin-top', $('.page > .stretch-header')
      .width() * aspectratio + 15);
}
于 2022-01-25T07:17:12.623 回答