我正在尝试在每张幻灯片上使用带有基于文本的内容的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:
谢谢!
只需评论以下内容:
....
//$(window).resize(carouselInit);
</script>
<div class="carousel">
....
在关闭脚本标记之前,在代码中注释$(window).resize(carouselInt)。请查看以下工作示例:http://jsfiddle.net/saidbakr/6FMrL/9/
我有同样的问题,并通过使用以下代码更改每个浏览器调整大小的视口大小和幻灯片宽度来修复它:
$(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);
});
});
}
});