Как уничтожить/удалить/развязать Flexslider

Есть несколько обсуждений на странице github относительно метода destroy и пару вопросов о стеке, но пока не было прямого ответа или решения, которое я смог найти после многих поисков.

Текущая версия flexslider http://www.woothemes.com/flexslider/ не имеет метода уничтожения. В примечаниях говорится, что предыдущая версия 1.8 делает, но использование этого метода не работает.

Мне нужно отвязать элемент flexslider, а затем вызвать .flexslider() для другого элемента, поскольку я не хочу, чтобы несколько слайдеров выполнялись одновременно.

Как я могу это сделать? Примечание: удаление элементов навигации, удаление классов, разворачивание UL и удаление ".clone" li недостаточно хороши! Я хочу полностью вернуть элемент слайдера в исходное состояние!

Сейчас я клонирую ползунок перед инициализацией flexslider, затем используйте .after(), чтобы вставить клон после слайдера, а затем удалите слайдер. Но это похоже на очень тяжелый подход ко мне.

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

Спасибо!

Ответ 1

Пользователь Github отправил запрос на перенос для добавления метода уничтожения для плагина. https://github.com/woothemes/FlexSlider/pull/771

Я взял эту версию этого плагина с его методом destroy, и он отлично работает для меня. Я получил его из https://github.com/bradgreens/FlexSlider/tree/release-2-2-0

Ответ 2

Вы пробовали отсоединить и прикрепить? это будет удерживать состояние и даже события от чего-либо отдельного.

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

Ответ 3

Метод destroy никогда не работает для меня.

Единственное надежное решение, которое я нашел (начиная с текущей версии 2.2.2), - это полностью удалить элемент flexslider из DOM, а затем восстановить его.

Что-то вроде:

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

Затем я повторно инициализую flexslider с нуля:

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

Я также считаю, что этот метод более надежный, чем добавление и удаление слайдов, чтобы заставить ползунок обновляться.

Ответ 4

Для меня я нашел это решение:

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

Ответ 5

Возможно:

$('#slider').flexslider("destroy") //Revert the plugin to its uninitialized state