Reinitialise existing jQuery flexslider with new options

esik picture esik · Sep 29, 2013 · Viewed 7.8k times · Source

I used $(document).ready to load script:

$(document).ready(function (){
    $('.flexslider').flexslider({
       animation: 'fade',
       controlsContainer: '.flexslider'
    });
});

Next I want to change option "animation" by buttons:

<div class="container span12 menu">
    <a id="link-fade" class="menubtn" href="#">FADE</a>
    <a id="link-slide" class="menubtn" href="#">SLIDE</a>
</div>

but this not working:

$(document).ready(function (){
    $('#link-fade').click(function(){
        $('.flexslider').flexslider({
            animation: 'fade',
            controlsContainer: '.flexslider'
        });
        return false;
    });
    $('#link-slide').click(function(){
        $('.flexslider').flexslider({
            animation: 'slide',
            controlsContainer: '.flexslider'
        });
        return false;
    });
});

Answer

szogun1987 picture szogun1987 · Sep 29, 2013

In my opinion the only way to do it is remove whole element, create new one and call flexslider function with new one. "animation" parameter is used only during initialization of widget.