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>