如何让Flexslider在iOS上显示不同的宽高比图像？ [英] How to make Flexslider display different aspect ratio images on iOS?
问题描述
我在iOS设备上遇到过Flexslider的问题，似乎与。这是代码：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportid =viewportcontent =initial-scale = 1.0，width = device-width/>
< script src =jquery.jstype =text / javascript>< / script>
< script src =jquery.flexslider.jstype =text / javascript>< / script>
< script type =text / javascript>
jQuery（window）.load（function（）{
jQuery（'。flexslider'）。flexslider（{
controlNav：true，
animationLoop：true，
slideshowSpeed：2000
}）;
}）;
< / script>
< link rel =stylesheethref =flexslider.css/>
< style type =text / css>
#example {
宽度：100％;
身高：汽车;
max-width：400px;
background-color：＃f0f0f0;
}
< / style>
< / head>
< body>
< h1> Flexslider iOS错误示例< / h1>
< section id =example>
< div class =flexslider>
< ul class =slides>
< li>< img src =tallslide.jpg>< / li>
< li>< img src =wideslide.jpg>< / li>
< / ul>
< / div>
< p>滑块后的文字< / p>
< / section>
< / body>
< / html>
我尝试了很多CSS调整，例如更改要显示的图像：内联，以及搞乱边距和填充。没有一个能让它变得更好。
我的问题是：
你如何让Flexslider在iOS上正确显示短幻灯片，或者你知道一个滑块吗？在具有不同宽高比的幻灯片的响应式网站中运行良好？
看起来Flexslider提供的内容目前看起来不太可能。我最好的选择是使用BXSlider，它有一个 adaptiveHeight 选项。
I've encountered a problem with Flexslider on iOS devices that seems similar to the problem reported in this unanswered question. Slideshows with images of different aspect ratios display properly on OSX Safari and all other browsers I've tried (even IE8), but not on iOS 5 or 6 using Safari or Chrome. The problem occurs on both iPhone and iPad.
I first noticed this in a large responsive portfolio site I'm building for a client and thought it might be related to the unusual configuration including pulling the slider in using Ajax. As it turns out I was able to reduce it to a simple example. Here are screen shots of the example in iOS and OSX Safari.
The example is very simple and uses jQuery 1.10.1 and jQuery.flexslider 2.1. You can find a working example on my website. Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" id="viewport" content="initial-scale=1.0, width=device-width" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.flexslider.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000
});
});
</script>
<link rel="stylesheet" href="flexslider.css" />
<style type="text/css">
#example{
width:100%;
height:auto;
max-width:400px;
background-color:#f0f0f0;
}
</style>
</head>
<body>
<h1>Flexslider iOS bug example</h1>
<section id="example">
<div class="flexslider">
<ul class="slides">
<li><img src="tallslide.jpg"></li>
<li><img src="wideslide.jpg"></li>
</ul>
</div>
<p>Text after slider</p>
</section>
</body>
</html>
I've tried numerous CSS adjustments such as changing the images to display:inline, and messing with margins and padding. None of those made it any better.
My question is: How do you make Flexslider display short slides properly on iOS or do you know of a slider that works well in responsive sites with slides of different aspect ratios?
It doesn't look like it's currently possible with what Flexslider provides. My best alternative was to use BXSlider which has an adaptiveHeightoption.
这篇关于如何让Flexslider在iOS上显示不同的宽高比图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
