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!

Lungi

modify plugin or use the clone/replaceWith method are about your only choices -OR- switch to another plugin that has features you need – Jankowski

If you come up with anything that works please let us know as I'm currently wanting to do the same thing. – Badr

Answer 1

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

Bilinear

@BradGreens, great job Brad. You've helped me a lot. Thanks! Teegan, thanks for finding Brad's pull request :) – Occurrence

Very useful... I just wish they'd hurry up and merge it. – Tiffin

Answer 2

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

Arc

Can't seem to get this to work. Tried .empty() and .remove(), too. No luck. – Tiffin

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.

Mixup

Have you ever shared your use case with the destroy method "not working?" Can you confirm your code-base is exactly cloned from github.com/bradgreens/FlexSlider/tree/release-2-2-0? – Evocator

removing jQuery widgets without calling the destroy() method can cause a memory leak. Reader beware. – Mcroberts

@Mindwin What is the destroy()? – Mirilla

Answer 4

For me, I found this solution :

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

Making