0

我已经在本地和 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>

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

4

1 回答 1

0

您可以尝试两个建议：

您上面的代码和 jsFiddle 使用不同版本的 jQuery。flexslider 示例页面使用 jQuery 1.9.1，所以现在最好坚持使用它

最可能的原因是你应该初始化 flexslider 

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

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

祝你好运！

于 2013-08-08T13:20:52.560 回答