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, that I was able to find after alot of searching.

The current version of flexslider http://www.woothemes.com/flexslider/ does not have a destroy method. In the notes it says that the former version 1.8 does, but using that method does not work.

I need to unbind a flexslider element then call .flexslider() on another element as I don't want several sliders running simultaneously.

How can I do this? Note: removing nav elements, removing classes, unwrapping the UL and removing ".clone" li's is not good enough! I want to completely return the slider element to its original state!

Right now I clone the slider before initializing flexslider, then use .after() to insert the clone after the slider, then remove the slider. But this seems like a very heavy handed approach to me.

$projCur.addClass('flexslider').flexslider({
    animation: "slide",
    animationSpeed: 500,
    slideshow: false,
    manualControls: '.dot-nav li a'             
});

Thanks!

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.