I am trying to design a slide navigation with four slides.
I based my layout on
this blueprint, by adapting the number of slides.
This is my testcase:
Edit fiddle - JSFiddle
While the first (left) and last (right) slide both work fine, i failed to get the inner slides running properly. The problem arises, when the closing event occures, which is this part of code in the JS I suppose:
Code:
// 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);
};
The snipped is from the blueprint and designed for two slides only.
The result is, that the classes .open-innerleft and .open-innerright will not reset on closing the slides.
How can I adapt it for four slides?
Thank you very much in advance!