1

プレゼンテーションにdeck.jsを使用しています。1つのスライドに対して、カルーセルで通過できる図/画像を含む静的ヘッダーが必要です。関連するHTMLは次のとおりです。

<section class="carousel slide">
  <h2>Static Title</h2>
  <figure class="slide"><figcaption>Text for first image</figcaption><img src="images/first_image.png" alt=""></figure>
  <figure class="slide"><figcaption>Text for second image</figcaption><img src="images/second_image.png" alt=""></figure>
  <figure class="slide"><figcaption>Text for third image</figcaption><img src="images/third_image.png" alt=""></figure> 
</section>

これが、deck.jsに付属している水平スライドテーマでこれを機能させるためにdeck.jsに追加したJSです。

.carousel .deck-before {
    -webkit-transform: translate3d(-400%, 0, 0);
    -moz-transform: translate(-400%, 0);
    -ms-transform: translate(-400%, 0);
    -o-transform: translate(-400%, 0);
    transform: translate3d(-400%, 0, 0);
    height:0;
}

.carousel .deck-after {
    -webkit-transform: translate3d(400%, 0, 0);
    -moz-transform: translate(400%, 0);
    -ms-transform: translate(400%, 0);
    -o-transform: translate(400%, 0);
    transform: translate3d(400%, 0, 0);
    height:0;
}

.carousel .deck-next {
    -webkit-transform: translate3d(200%, 0, 0);
    -moz-transform: translate(200%, 0);
    -ms-transform: translate(200%, 0);
    -o-transform: translate(200%, 0);
    transform: translate3d(200%, 0, 0);
    height:0;
}

.carousel .deck-previous {
    -webkit-transform: translate3d(-200%, 0, 0);
    -moz-transform: translate(-200%, 0);
    -ms-transform: translate(-200%, 0);
    -o-transform: translate(-200%, 0);
    transform: translate3d(-200%, 0, 0);
    height:0;
}

これは、画像のカルーセルが進むときにうまく機能します。ただし、戻ると、画面から移動している画像が下にシフトするため、新しい画像が入る場所より下になります。

画面の右側から移動している画像が、左側から画面に表示されている画像と同じ高さになるようにするにはどうすればよいですか？

4

1 に答える 1

1

問題の根本は遷移しないという事実にあります。heightしたがって、クラスの変更が発生した瞬間に、前の要素の高さがすぐに高くなり、まだ遷移していないスライドが表示されなくなります。

これは解決するのがかなり難しい問題です。ニーズに基づいていくつかの選択を行う必要があります。

まず、height:0あなたの前/後/前/次のそれぞれから取り出して、ただ言って.carousel .slide { height: 0 }ください。

動作させるためにdeck.scale拡張機能が必要ですか、それともカルーセルの後にスライドコンテンツがありますか？もしそうなら、あなたはそれ.carouselを補うために高さを与える必要があるでしょう。

その高さを事前に知っていますか？CSSで設定するだけです。

高さがわからない、または毎回手作業で高さを設定せずにどこでも使用したいですか？カルーセルの内容をチェックして高さを設定する小さなスクリプトを作成します。このようなもの（テストされていない、注意してください）：

$(window).load(function() {
  $('.carousel').each(function(carousel) {
    var $carousel = $(carousel);
    var maxHeight = 0;

    $carousel.each(function() {
      var height = $(this).height();
      maxHeight = Math.max(height, maxHeight);
    });

    $carousel.height(maxHeight);
  });
});

このようなスクリプトでは、height:0CSSから宣言を完全に削除してください。

于 2012-07-28T00:55:18.150 に答える