CSS.css

.fadeIn {
    animation: unset !important;
}

.forward {
    animation: forward 0.3s 1;
}

.backward {
    animation: backward 0.3s 1;
}

@keyframes
forward {
    from { transform: translateX(-100 %); }
    to { transform: translateX(0 %) }
}

@keyframes
backward {
    from { transform: translateX(100 %); }
    to { transform: translateX(0 %) }
}

JS.js

(function() {

window.addEventListener('load', function() {
    var next = document.querySelector('button[data-next]');
var previous = document.querySelector('button[data-previous]');

var checkSlideDirection = function() {
    var figures = document.querySelectorAll('.gallery-fullscreen-slideshow-item');
    var image = figures[2].querySelector('.gallery-fullscreen-slideshow-item-img');
    if (figures[2].dataset.next === 'false') {
        console.log('slide backward')
        image.classList.remove('fadeIn')
        image.classList.add('backward')
        image.classList.remove('forward')
        console.log(image)
    } else if (figures[2].dataset.next === 'true') {
        console.log('slide forward')
        image.classList.remove('fadeIn')
        image.classList.remove('backward')
        image.classList.add('forward');
        console.log(image);
    }
}

next.addEventListener('click', checkSlideDirection);
previous.addEventListener('click', checkSlideDirection);

    
}
)

})();