Flexslider不工作

Question

HTML滑块代码：

<ul class="slides">
    <li>
        <div class="large-image">
            <img alt="#" src="http://sale.coupsoft.com/uploads/698778/13_2.jpg">
        </div>
    </li>
    <li>
        <div class="large-image">
            <img alt="#" src="http://sale.coupsoft.com/uploads/698778/5_2.jpg">
        </div>
    </li>               
</ul>

HTML轮播代码：

<div class="flexslider flexslider-thumb" id="carousel">
    <ul class="previews-list slides">
        <li><img alt="#" src="http://sale.coupsoft.com/uploads/698778/13_2.jpg"></li>
        <li><img alt="#" src="http://sale.coupsoft.com/uploads/698778/5_2.jpg"></li>    
    </ul>
</div>

jQuery代码：

$("#carousel").flexslider({
    animation:"slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    asNavFor: '#slider'
})
$("#slider").flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
})

输出：

​

​

所有图像都显示为垂直对齐。我想把它显示为滑块。我该怎么做呢？提前谢谢你。

Answer 1

$("#slider").flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
})

此代码段不针对您的任何html元素。您有slides和carousel，但slider不在您的标记中。我会从那里开始。如果不是这样，请为我们发布一个JSFiddle或Codepen ...

Answer 2

​

$("#carousel").flexslider({
    animation:"slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false
})
$("#slider").flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script> 
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script> 
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script> 
<script type='text/javascript' src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script> 
<ul class="slides">
    <li>
        <div class="large-image">
            <img alt="#" src="http://sale.coupsoft.com/uploads/698778/13_2.jpg">
        </div>
    </li>
    <li>
        <div class="large-image">
            <img alt="#" src="http://sale.coupsoft.com/uploads/698778/5_2.jpg">
        </div>
    </li>               
</ul>
<div class="flexslider flexslider-thumb" id="carousel">
    <ul class="previews-list slides">
        <li><img alt="#" src="http://sale.coupsoft.com/uploads/698778/13_2.jpg"></li>
        <li><img alt="#" src="http://sale.coupsoft.com/uploads/698778/5_2.jpg"></li>    
    </ul>
</div>

​