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" 
}) 

OUTPUT：

所有圖像都顯示爲垂直對齊。我想將其顯示爲滑塊。我該怎麼做？並提前致謝。

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>