Question

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

当我关闭colorbox弹出窗口时，我需要禁用bxSlider。 bxSlider代码在html数据模板中（所以每次我创建/加载colorbox弹出窗口时，它都有与bxSlider相同的内联JS）。

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

Answer 1

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

var detailSlider;

然后将滑块设置为该var：

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

然后在我的ajax onClosed事件中添加colorbox：

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

现在正常工作：）

弹出窗口关闭时，在Colorbox弹出窗口中停止/删除bxSlider？

1 个答案: