How to destroy/remove/unbind a Flexslider

Question

There are a few discussions on the github page regarding the destroy method, and a couple questions on stack, but there hasn\'t been a straightforward answer or solution yet

Answer 1

Have you tried detach and attach? this will keep the state and even events of anything detached.

var flex = $('.flexslider').detach(); //detach
$('body').append(flex); //reattach

Answer 2

A Github user has submitted a pull request to add a destroy method for the plugin. https://github.com/woothemes/FlexSlider/pull/771

I took this users version of the plugin with his destroy method and it works great for me. I got it from https://github.com/bradgreens/FlexSlider/tree/release-2-2-0

Answer 3

The destroy method never works for me.

The only reliable solution I've found (since the current version 2.2.2) is to completely remove the flexslider element from the DOM, then reinstate it.

Something like:

$('.flexslider').remove();
// re-insert clean mark-up so flexslider can reset itself properly
$('.flexslider-container').append('<div class="flexslider"><ul class="slides"></ul></div>');

Then I reinitialise the flexslider from scratch:

var imglist = '<li><img ...></li><li><img ...></li>...';
$('.flexslider ul.slides').html(imglist);
$('.flexslider').flexslider({ 
    ...
});

I also find this method is more reliable than adding and removing slides in order to get the slider to update itself.

Answer 4

For me, I found this solution :

$('.logo-carousel').flexslider({
   move : 0
});