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

Posted 2023-03-06

【中文标题】Flexslider 视口高度在调整大小时无响应

【英文标题】：Flexslider viewport height unresponsive on resize

【发布时间】：2012-11-14 00:05:18

【问题描述】：

我正在尝试在每张幻灯片上使用带有基于文本的内容的 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 代码。 我设置了一个在负载时运行的警报，以冻结多张幻灯片的混乱。

谢谢！

【参考方案1】：

只需评论以下内容：

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

        </script>

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

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

【参考方案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);
                );

            );
        
    );