我试图找出 Flexslider 的一个问题,该问题仅在我在 Safari Mobile 等移动浏览器上测试时才会出现。
所有
我不知道如何抓取它的屏幕截图,因为它在桌面浏览器上运行良好,但在移动浏览器上运行不正常。这是一个 fiddle ,当我在桌面浏览器上查看它时,它显示了它的工作原理,容器的高度会根据内容的数量调整大小。
http://jsfiddle.net/CsCyh/
这是hml:
<div class="flexslider">
<ul class="slides">
<li>
<img src="http://i.imgur.com/YSVlz2Z.jpg" />
<h2><a href"#">First Link Here</a></h2>
<p>Some text here that could be a message</p>
<a href="#" data-role="button" data-icon="arrow-r" data-iconpos="right">Another Link Here</a>
</li>
<li>
<img src="http://i.imgur.com/YSVlz2Z.jpg" />
<h2><a href"#">Second Link Here</a></h2>
<p>Some text here that could be a message</p>
</li>
<li>
<img src="http://i.imgur.com/YSVlz2Z.jpg" />
<h2><a href"#">Third Link Here</a></h2>
<p>Some text here that could be a message</p>
</li>
</ul>
</div>
这是 flexslider 的 JS:
$('.flexslider').flexslider();
最佳答案
嗯,我前段时间遇到了这个问题。我希望这有帮助!
var evenSliderHeight = function(slideContainer, slideItem) {
var slider_height = 0;
var $slider_slide = $(slideContainer).find(slideItem);
$slider_slide.each(function() {
var __height = $(this).outerHeight(true);
if ( slider_height < __height ) {
slider_height = __height;
}
});
$slider_slide.css('min-height', slider_height);
};
evenSliderHeight('.flexslider-container', '.slide');
关于javascript - Flexslider <li> 高度等于移动浏览器上最高的 <li>,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/15752070/