Flexslider无法正常工作

Question

HTML slider code:

<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 carousel code:

<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 code:

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

OUTPUT:

all images are displaying as vertically aligned. I want to display it as the slider. How can I do it? and thanks in advance.

Answer 1

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

This snippet is not targeting any of your html elements. You've got slides and carousel but slider is not in your markup. I'd start there. If that's not it, please post a JSFiddle or Codepen for us...

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>