拆分布局有四个幻灯片

Question

我正在尝试使用四张幻灯片设计幻灯片导航。 我通过调整幻灯片的数量将我的布局基于this blueprint。

这是我的测试用例：http://jsfiddle.net/n9z2nppr/4/

虽然第一张（左）和最后一张（右）幻灯片都工作正常，但我没能让内部幻灯片正常运行。当关闭事件发生时会出现问题，这就是我认为JS中代码的这一部分：

// back to intro
        // after transition ends:
        var onEndTransFn = function () {
            this.removeEventListener(transEndEventName, onEndTransFn);
            classie.add(splitlayout, 'reset-layout');
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        },
        backToIntro = function (ev) {
            ev.preventDefault();
            ev.stopPropagation();
            var dir = classie.has(ev.target, 'back-left') ? 'left' : 'right',
                page = dir === 'right' ? pageRight : pageLeft;
            classie.remove(splitlayout, 'open-' + dir);
            classie.add(splitlayout, 'close-' + dir);
            page.addEventListener(transEndEventName, onEndTransFn);
        };

该代码段来自蓝图，仅适用于两张幻灯片。 结果是，关闭幻灯片时，类.open-innerleft和.open-innerright不会重置。

如何使其适应四张幻灯片？