关闭弹出窗口时停止/删除Colorbox弹出窗口内的bxSlider？答案

【问题标题】：Stop/remove bxSlider inside Colorbox popup when popup is closed?关闭弹出窗口时停止/删除Colorbox弹出窗口内的bxSlider？
【发布时间】：2014-09-26 10:18:22
【问题描述】：

我使用带有 html 数据的颜色框弹出窗口，但是在关闭弹出窗口后，我注意到我的 bxSlider 仍在输出 console.log 行，该行在滑块移动到下一张或上一张幻灯片时运行。

当我关闭我的颜色框弹出窗口时，我需要禁用 bxSlider。 bxSlider 代码位于 html 数据模板中（因此每次我创建/加载颜色框弹出窗口时，它都有相同的 bxSlider 内联 JS）。

我的颜色框是使用以下代码创建的：

$.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 的任何想法？

【问题讨论】：

标签： jquery colorbox bxslider

【解决方案1】：

似乎我只需要一个全局变量，例如：

var detailSlider;

然后将滑块设置为该变量：

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

然后为颜色框添加我的 ajax onClosed 事件：

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

现在工作正常:)

【讨论】：