Get the index of slides after drag, or the direction

[sorcamarian]

I am having a menu representing each slide.
After dragging the slides, I want to update the active menu with styling.

I tried to use events moved to get the index of slides: newIndex, prevIndex, destIndex but the problem is that this event is fired after dragend.
Also, drag event's don't come with info about index of slides.

What I tried:

var movedData = {
    newIndex: "",
    prevIndex : "",
    destIndex : ""
}
fitForMissionSlider.on("move", function(newIndex, prevIndex, destIndex) {
    movedData.newIndex = newIndex;
    movedData.prevIndex = prevIndex;
    movedData.destIndex = destIndex;
});
fitForMissionSlider.on("dragged", function(event) {
    document.querySelector(".fit-for-mission-head-list li.active").classList.remove("active");
    var shouldBeActiveNavEl = Y.all(".fit-for-mission-head-list li")._nodes[movedData.newIndex]
    shouldBeActiveNavEl.classList.add("active");
});

Also, if I could know the direction after dragend I would be able to see if it was to a previous or a next slide.

https://splidejs.com/guides/events

[sorcamarian]

Just found this solution

// When the carousel was moved by a drag, update the navigation    
fitForMissionSlider.on("dragged", function(event) {
    setTimeout(function() {
        var indexStr = Y.one(".fit-for-mission-body-list .is-visible").getAttribute("aria-label").split(" ")[0];
        document.querySelector(".fit-for-mission-head-list li.active").classList.remove("active");

        var shouldBeActiveNavEl = Y.all(".fit-for-mission-head-list li")._nodes[Number(indexStr) - 1];
        shouldBeActiveNavEl.classList.add("active");
    }, 500);
});

Y is from YUI3 library, used as a selector

[sorcamarian]

NOTE: My first solution works on slide version @3.6.12 but not on @4.1.4