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、カルーセルがページに完全に描画される前にイベントがトリガーされるため、高さが信頼できないことです。

遅ればせながら、ちゃんとゲットできました。しかし、これは明らかにハックであり、低速のデバイスでカルーセルが時間内に描画されることを保証することはできません。

ドキュメントに他の有用なイベントが表示されません。

デモフィドル

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 に答える