Javascript 使用四张幻灯片拆分布局

我正在尝试设计一个包含四张幻灯片的幻灯片导航。 我根据幻灯片的数量调整布局

这是我的测试用例：

虽然第一个（左）和最后一个（右）幻灯片都工作正常，但我未能使内部幻灯片正常运行。当关闭事件发生时会出现问题，我想这是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 innerlight

和

.open innerright

在关闭幻灯片时不会重置

如何将其调整为四张幻灯片