2

各スライドのテキストベースのコンテンツでFlexsliderを使用しようとしています。つまり、スライドの垂直方向の高さとビューポートは、ウィンドウの幅に応じて動的に変更する必要があります。

ロード時に、Flexsliderが初期化され、後続のjQueryによって、すべてのスライドがビューポートと同じ高さになり、各スライド内でコンテンツが垂直方向に中央揃えになります。ブラウザのサイズを変更しない場合は、これで問題ありません。ただし、そうする場合、いくつかの問題があります。

  • ウィンドウサイズを変更すると、ビューポートの高さはロード時にすでに設定されており、変更されないため、ウィンドウを縮小するとテキストがオーバーフローして消え、拡大するとスライドが非常に空白になります。
  • 奇妙なことに、ページの読み込み時にウィンドウのサイズを変更する場合、ビューポートはかなり大きな高さを想定しています。

これに関連する可能性のある別の問題もあります。*ロード時に、Flexsliderが初期化されるときに色とりどりの混乱が短時間表示されます。

私のコードは次のようになります：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="/link/to/flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
    var verticalCenterer = function () {
            $(this).css('margin-top', ($(this).parent().height()-($(this).outerHeight()))/2);
        };

    var carouselInit = function() {
        var carouselHeight = $('.flex-viewport').innerHeight();
        $('.slides li').css('height',carouselHeight);
        $('p').each(function()
            {
            $(this).css('margin-top', ($(this).parent().height()-($(this).outerHeight()))/2);
            }
        );
        }

    $(window).load(function() {
      $('.carousel').flexslider({
        animation: "slide",
        slideshowSpeed: 2000,
        animationSpeed: 500,
        directionNav: false,
        pausePlay: true,
        pauseText: '',
        playText: '',
        start: carouselInit
      });
       alert('Wait a moment');
    });

    $(window).resize(carouselInit);

    </script>

<div class="carousel">
    <ul class="slides">
    <li style="background: #ff9999;">
        <p>Lorem ipsum dolor sit amet 1; Lorem ipsum dolor sit amet 2; Lorem ipsum dolor sit amet 3; Lorem ipsum dolor sit amet 4; Lorem ipsum dolor sit amet 5; Lorem ipsum dolor sit amet 6; Lorem ipsum dolor sit amet 7; Lorem ipsum dolor sit amet 8; Lorem ipsum dolor sit amet 9; <strong>Lorem ipsum dolor sit amet 10</strong>; Lorem ipsum dolor sit amet 11; Lorem ipsum dolor sit amet 12; Lorem ipsum dolor sit amet 13; Lorem ipsum dolor sit amet 14; <strong>Lorem ipsum dolor sit amet 15</strong>.</p>
    </li>
    <li style="background: #9999ff;">
        <p>A shorter one</p>
    </li>
    <li style="background: #99ff99;">
        <p>Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text Test text test text</p>
    </li>
  </ul>
</div>

また、jsfiddleの例も作成しました。

  • スライドマークアップとページ固有のJavaScriptの両方がHTMLに含まれています。
  • JavaScriptには、最新の縮小されたFlexsliderコードが含まれています。
  • マルチスライドの混乱を凍結するために、ロード時に実行されるアラートを入れました。

ありがとう！

4

2 に答える 2

0

次のようにコメントするだけです。

....
//$(window).resize(carouselInit);

        </script>

<div class="carousel">
....

script タグを閉じる前に、コード内で $(window).resize(carouselInt) をコメントしてください。次の実際の例を確認してください: http://jsfiddle.net/saidbakr/6FMrL/9/

于 2012-11-26T14:23:43.263 に答える