How to make Flexslider display different aspect ratio images on iOS?
Question
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?
3 answers
solution1
2 ACCPTED 2013-07-08 01:30:20
It doesn't look like it's currently possible with what Flexslider provides. My best alternative was to use BXSlider which has an adaptiveHeight option.
solution2
0 2013-07-04 15:24:13
If your images are all different sizes than what you need to is set the height of the container to a fixed value and set the content to be overflow:hidden;
Something like
.flexslider {
height: 300px;
overflow: hidden;
}
You could include a series of media queries based on the height of the viewport to adjust that height over a range of heights.
solution3
0 2014-01-31 23:25:06
Something like that?! Customized according to your example ;) (flexslider 2.1 tested)
jQuery(window).load(function() {
jQuery('.flexslider').flexslider({
controlNav:true,
animationLoop: true,
slideshowSpeed:2000,
after: function(slider){
$(this).height( $(this).find('.slides > li').eq(slider.currentSlide).height() );
}
});
});
From my previous answer to this stackoverflow question https://stackoverflow.com/a/21491781/3259159
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.