javascript - 适用于 Wordpress 的 Cycle2，在移动设备上破坏 Cycle，在比移动设备更大的设备上重新初始化

Question

我使用cycle2在Wordpress中创建了一个幻灯片 – 工作正常。我希望在窗口调整大小时销毁并重新初始化 Cycle2，即为移动设备解开幻灯片并为桌面重新包装。我从用户 dotty 那里借用了以下脚本:

var contentslideShowElement = $('.content-slide-show');
        var contentSlideShowInitialized = true;
        contentslideShowElement.on( 'cycle-initialised', function() {
            contentSlideShowInitialized = true;
        });
        contentslideShowElement.on( 'cycle-destroyed', function() {
            contentSlideShowInitialized = false;
        });

        $(window).resize(function(){
            destroyContentSlideShowForMobile();
        });

        function destroyContentSlideShowForMobile(){
            if( contentSlideShowInitialized && $(window).width() < 768 ){
                contentslideShowElement.cycle('destroy');
            }

           if( !contentSlideShowInitialized && $(window).width() > 768 ){
                contentslideShowElement.cycle({
                slides: 'li',
                next: '.attachment-large',
                previous: ".prev"
            });
            }
        }

CSS如下:

<ul class="content-slide-show cycle-slideshow" data-cycle-slides="li">

这看起来应该可行，不幸的是我收到了“contentSlideShowInitialized 未定义”。

有什么想法吗？

更新:根据 Jorge 的建议，我已将“contentSlideShowInitialized”的默认值设置为 true。这使得包装/展开部分起作用。当我将浏览器宽度减小到 700 以下时，幻灯片会被破坏，但如果我以较小的尺寸加载页面，幻灯片仍然存在。

Answer 1

我认为您需要为 contentSlideShowInitialized 变量设置默认值:

    var contentslideShowElement = $('.content-slide-show');
    var contentSlideShowInitialized = false; // Set default
    contentslideShowElement.on( 'cycle-initialised', function() {
        contentSlideShowInitialized = true;
    });
    contentslideShowElement.on( 'cycle-destroyed', function() {
        contentSlideShowInitialized = false;
    });

    $(window).resize(function(){
        destroyContentSlideShowForMobile();
    });

    function destroyContentSlideShowForMobile(){
        if( contentSlideShowInitialized && $(window).width() < 768 ){
            contentslideShowElement.cycle('destroy');
        }

       if( !contentSlideShowInitialized && $(window).width() > 768 ){
            contentslideShowElement.cycle({
                slides: 'li',
                next: '.attachment-large',
                previous: ".prev"
            });
        }
    }