CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rushabh Shah
Rushabh Shah

Reputation: 515

Flexslider is not working

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

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

Upvotes: 0

Views: 103

Answers (2)

Mahi
Mahi

Reputation: 1727

$("#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>

Upvotes: 0

s0rfi949
s0rfi949

Reputation: 387

$("#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...

Upvotes: 1

Related Questions