1

いくつかのスライドを含むスライダーがあります。すべてのスライドの高さが異なります。

次のように動作します。

1枚目のスライド

<holder>
 <slide - display: block>
 <slide - display: none>
 <slide - display: none>
</holder>

2枚目のスライド

<holder>
 <slide - display: none>
 <slide - display: block>
 <slide - display: none>
</holder>

等

スライドにはposition: absolute（こうでなければならない）があります。

問題は次のとおりです。高さを動的に変更しholderて、すべてのスライドのコンテンツ全体を表示する方法は?

今私が持っています：

<script type="text/javascript">
  $(document).ready(function(){
    $(".holder").height( $(".slide").height() );
  });
</script>

<script type="text/javascript">
  $(window).resize(function() {
    $(".holder").height( $(".slide").height() );
  });
</script>

ただし、最初のスライドの高さのみを使用するため、他のスライドは切り取られます。

この問題を解決するには、javascript を使用してください。

4

1 に答える 1

1

それらすべてを繰り返し処理して、最も高い の高さを取得できます.slide。

function updateSlideHolderSize() {
    var max = 0;
    $(".slide").each(function () {
        max = Math.max(max, $(this).height());
    });
    $(".holder").height(max);
}

したがって、次のようにアプリに入ります。

<script type="text/javascript">
$(document).ready(updateSlideHolderSize);
$(window).resize(updateSlideHolderSize);

function updateSlideHolderSize() {
    var max = 0;
    $(".slide").each(function () {
        max = Math.max(max, $(this).height());
    });
    $(".holder").height(max);
}
</script>
于 2013-04-10T03:02:44.893 に答える