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);
                });

            });
        }
    });

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

2 个答案: