用于 Wordpress 的 Cycle2，在移动设备上破坏循环，在比移动设备更大的设备上重新初始化答案

【问题标题】：Cycle2 for Wordpress, destroying cycle on mobile, reinitialising on larger than mobile用于 Wordpress 的 Cycle2，在移动设备上破坏循环，在比移动设备更大的设备上重新初始化
【发布时间】：2014-10-14 18:53:00
【问题描述】：

我使用 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 is not defined”。

有什么想法吗？

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

【问题讨论】：

标签： javascript html wordpress responsive-design jquery-cycle

【解决方案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"
            });
        }
    }

【讨论】：

【解决方案2】：

想通了：无需注意“循环初始化”和“循环销毁”。下面的代码完成了这项工作。

var contentslideShowElement = $('.content-slide-show');

        $(window).load(function(){
            decideContentSlideShowForMobile();
        });

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

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

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

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

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

【讨论】：