Question

我一直在使用FlexSlider这个奇怪的问题，我基本上从flexslider的demo page复制了缩略图滑块的代码，我根据需要进行了一些小修改但旋转木马从不同步滑块所以它没用。我已经尝试过，即使最基本的例子仍未按预期工作，也没有返回错误。

我将在下面解释，但您可以查看“工作”示例here

我在<head>部分中包含了css，在</body>标记关闭之前包含了js。我虽然缩小版本可能导致问题，所以对于这个例子我包括完整的脚本。

in head
<link rel="stylesheet" href="js/flexslider/flexslider.css">

before body tag close
<script src="js/flexslider/jquery.flexslider.js"></script>

然后我的滑块和旋转木马有以下方式：

<div class="flexslider slider_casas">
    <ul class="slides">
        <li><img etc etc etc></li>
        <li><img etc etc etc></li>
        ........
    </ul>
</div>
<div class="flexslider carousel_casas">
    <ul class="slides">
        <li><img etc etc etc></li>
        <li><img etc etc etc></li>
        ........
    </ul>
</div>

最后，对于初始化（在我包括flexslider.js之后），我使用以下内容：

<script>

    $(window).load(function() {

        $('.carousel_casas').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: true,
            itemWidth: 140,
            itemMargin: 10,
            asNavFor: ".slider_casas"
        });

        $('.slider_casas').flexslider({
            animation: "fade",
            controlNav: false,
            animationLoop: true,
            sync: ".carousel_casas",
            slideshowSpeed: 4000,
            animationSpeed: 600,
            slideshow: false
        });
    });     

</script>

Flexslider无法按预期工作

0 个答案: