如何在调整大小时破坏lightSlider？

Question

我想在我的网站上使用lightSlider来浏览一些div，但我只想在移动设备上使用它。所以我想在达到特定断点后在调整大小时销毁滑块。

我的脚本看起来像这样：

function theSlider() {
    var slider = $('#content-slider').lightSlider({
        gallery: false,
        item: 1,
        loop: false,
        slideMargin: 0,
        enableDrag: true,
        keyPress: true,
        pager: true,
        adaptiveHeight: false,
        responsive: [{
            breakpoint: 768,
            settings: {
                item: 2,
                slideMove: 1,
                slideMargin: 6,
            }
        }, {
            breakpoint: 600,
            settings: {
                item: 1,
                slideMove: 1
            }
        }]
    });
}

function initAufhaenungSlider() {
    var resizeTimer;
    if ($(window).width() > 768) {
        initTeaserHeight();
        $('#content-slider').parent().parent().find('.lSAction, .lSPager').remove();
        $('content-slider').children().removeAttr('style');
    } else {
        theSlider();
        $('.content-slider .col-item').css('width', '100%');
    }

    $(window).on('resize', function(e) {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            if ($(window).width() < 768) {
                console.log('< 767');
                $('.lSPager').remove();
                var slider = $('#content-slider').lightSlider();
                slider.destroy();
                $('.content-slider .col-item').css('width', '100%');
                theSlider();
            } else {
                var slider = $('#content-slider').lightSlider();
                slider.destroy();
                console.log('> 767');

                $('.content-slider .col-item').css('width', '33.33333333%');
                initTeaserHeight();
                $('.lSPager').remove();
                $('.lSAction').remove();
                $('#content-slider').parent().removeClass('lSSlideWrapper').removeAttr('style');
            }
        }, 250);
        initTeaserHeight();
    });
}