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">
....

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

于 2012-11-26T14:23:43.263 回答
0

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

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

            });
        }
    });
于 2019-05-15T08:04:57.413 回答