Question

我已经在本地和jsfiddle上实现了Flexslider2。每个使用完全相同的代码。但是，当在本地查看我的页面时（Firefox，Chrome和IE9），Flexslide仅调整图像宽度。

jsfiddle http://jsfiddle.net/T64Gp/3/产生保持图像宽高比的预期结果

我的本地代码（HTML）如下。 flexslider.css之外没有样式，jQuery和flexslider.js之外没有其他javascript。

HTML

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="flexslider.css">   
    </head>
    <body>        
    <div class="flexslider">
        <ul class="slides">
            <li>
                <img src="1.jpg" alt="1" title="1">
            </li>
            <li>
                <img src="2.jpg" alt="2" title="2">
            </li>
            <li>
                <img src="3.jpg" alt="3" title="3">
            </li>
        </ul>
    </div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="flexslider.js"></script>
    <script>
        $('.flexslider').flexslider({});
    </script>
</body>
</html>

任何关于为什么会发生这种情况的见解将不胜感激。

Answer 1

您可以尝试两种建议：

上面的代码和jsFiddle正在使用不同版本的jQuery。 The flexslider example page使用jQuery 1.9.1所以也许现在最好坚持使用它

最可能的原因是你应该用

初始化flexslider

<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>

这将确保在flexslider初始化之前加载页面内容。

祝你好运！

Flexslider2示例：相同的代码，不同的结果（本地和jsfiddle）

1 个答案: