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;
});
});
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.