Остановить/удалить bxSlider внутри всплывающего окна Colorbox при закрытии всплывающего окна?

Question

Я использую всплывающие окна colorbox с данными html, однако после закрытия всплывающего окна я заметил, что мой bxSlider все еще выводит строку console.log, которая запускается, когда ползунок переходит к следующему или предыдущему слайду.

Мне нужно отключить bxSlider, когда я закрываю всплывающее окно colorbox. Код bxSlider находится внутри шаблона данных html (поэтому каждый раз, когда я создаю/загружаю всплывающее окно colorbox, у него есть тот же встроенный JS для bxSlider).

Мой Colorbox создан с помощью этого кода:

$.ajax({ 
     async: true, 
     type: 'GET', 
     url: page, 
     success: function(data) 
     { 
      $.colorbox({ 
       initialWidth: 700, 
       initialHeight: 700, 
       current: "{current}/{total}", 
       onClosed: function() { 
        $.colorbox.remove(); 
       }, 
       html: data 
      }); 
     } 
    }); 

Это код, я использую для bxSlider внутри всплывающего окна:

$('#detail_slider').show().bxSlider({ 
    mode: 'fade', 
    controls: true, 
    pager: true, 
    caption: false, 
    slideWidth: 500, 
    responsive: true, 
    speed: 700, 
    pause: 4500, 
    auto: true, 
    prevText: '<i class="fa fa-4x fa-angle-left fa-inverse"></i>', 
    nextText: '<i class="fa fa-4x fa-angle-right fa-inverse"></i>', 
    prevSelector: '#prevSelector', 
    nextSelector: '#nextSelector', 
    pagerCustom: '#pager_thumbs', 
    onSlideBefore: function($slideElement, oldIndex, newIndex) { 
     $('#pager_' + oldIndex).removeClass("hiTop"); 
     $('#pager_' + newIndex).addClass("hiTop"); 
     console.log('old: ' + oldIndex + ' new: ' + newIndex); 
    } 
}); 

Любые идеи о том, как отключить/удалить bxSlider когда Я закрываю всплывающее окно colorbox?

Answer 1

Кажется, я просто должен был глобальной переменной, как:

var detailSlider; 

Затем установите ползунок в этот вар:

detailSlider = $('#detail_slider').colorbox({ SETTINGS }); 

Затем добавить в моем АЯКС OnClosed событие для ColorBox:

if(detailSlider.length > 0) { 
    detailSlider.destroySlider(); 
    detailSlider = []; 
} 

Работы хорошо сейчас :)