1

我在 iOS 设备上遇到了与 Flexslider 相关的问题，该问题与此未回答问题中报告的问题相似。具有不同纵横比图像的幻灯片可以在 OSX Safari 和我尝试过的所有其他浏览器（甚至 IE8）上正确显示，但在使用 Safari 或 Chrome 的 iOS 5 或 6 上则不能。iPhone 和 iPad 都会出现此问题。

我首先在我为客户构建的大型响应式投资组合网站中注意到这一点，并认为这可能与不寻常的配置有关，包括使用 Ajax 拉动滑块。事实证明，我能够将其简化为一个简单的示例。以下是 iOS 和 OSX Safari 中示例的屏幕截图。

在此处输入图像描述

该示例非常简单，使用 jQuery 1.10.1 和 jQuery.flexslider 2.1。您可以在我的网站上找到一个工作示例。这是代码：

<!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>

我尝试了许多 CSS 调整，例如将图像更改为 display:inline，以及弄乱边距和填充。这些都没有让它变得更好。

我的问题是：您如何让 Flexslider 在 iOS 上正确显示短幻灯片，或者您是否知道在具有不同纵横比幻灯片的响应式网站中运行良好的滑块？

4

3 回答 3

2

Flexslider 提供的功能目前似乎无法实现。我最好的选择是使用有一个adaptiveHeight选项的 BXSlider。

于 2013-07-08T01:30:20.500 回答
0

如果您的图像大小都与您需要的大小不同，则将容器的高度设置为固定值并将内容设置为overflow:hidden;

就像是

.flexslider {
  height: 300px;
  overflow: hidden;
}

您可以包含一系列基于视口高度的媒体查询，以在一定高度范围内调整该高度。

于 2013-07-04T15:24:13.750 回答
0

有那种东西？！根据您的示例定制；）（经过 flexslider 2.1 测试）

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

从我之前对这个 stackoverflow 问题的回答https://stackoverflow.com/a/21491781/3259159

于 2014-01-31T23:25:06.277 回答