Flexslider视口高度在调整大小时无响应

Question

我正在尝试在每张幻灯片上使用带有基于文本的内容的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>

我也做了an example jsfiddle：

• 幻灯片标记和特定于页面的JavaScript都在HTML中。
• JavaScript包含最新的缩小的Flexslider代码。
• 我已经发出一个警告，它会在负载下运行以冻结多个幻灯片。

谢谢！

Answer 1

只需评论以下内容：

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

        </script>

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

在关闭脚本标记之前，在代码中注释$（window）.resize（carouselInt）。请查看以下工作示例：http://jsfiddle.net/saidbakr/6FMrL/9/

Answer 2

我有同样的问题，并通过使用以下代码更改每个浏览器调整大小的视口大小和幻灯片宽度来修复它：

  $(window).on('resize', function () {

        if ($('.flexslider').length > 0) {

            $('.flexslider').each(function () {

                $(this).find('.flex-viewport').css('height', 'auto');

                $(this).find('>.slides').each(function () {
                    let height = $(this).css('height');
                    $(this).find('> li').css('width', height);
                });

            });
        }
    });