How to destroy/remove/unbind a Flexslider

房东的猫 提交于 2019-11-29 18:22:48

问题


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!


回答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




回答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



回答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.




回答4:


For me, I found this solution :

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


来源:https://stackoverflow.com/questions/13213913/how-to-destroy-remove-unbind-a-flexslider

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!