pause / play SlideShow (setInterval) in Javascript

Question

to start things of I want to mention that I am very new at this and probably very bad and I have tried for weeks now, searched answers and so on and just couldn't implement something proper in my code. I want to simply pause / resume a slide animation. I managed to make most of it work, but the problem is the setInterval. mine is set to 10s. I have a fading-in-out animation that lasts also 10 secs. If i pause lets say after 5 secs and then resume, the animation will have 10 extra seconds adding up to 15, after which it will change the slide abruptly and I want a smooth transition.

What I could think of is to save the elapsed time from the interval at the moment of pausing and then subtract that value from the total time of the interval and set it for the remaining part. Problem is i don't know how to put that into code. :/

var slideIndex = 1;
var myIndex = 0;
var myVar;
var playing = true;
var pauseButton = document.getElementById("pause");
var y = document.getElementsByClassName("mySlides");
var k;
var div = document.getElementsByClassName("stuff");
var globaltime = 10000;
var slideInterval = setInterval(carousel, globaltime);
var milisec;



function plusDivs(n) {
        showDivs(slideIndex += n);
    }

function currentDiv(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" white", "");
    }
    x[slideIndex-1].style.display = "block";
    dots[slideIndex-1].className += " white";
}

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" white", "");
    }
    x[myIndex-1].style.display = "block";
    dots[myIndex-1].className += " white";
}

function pauseSlideshow(){
    pauseButton.innerHTML = '&#9658;';
    playing = false;
    t = slideInterval;
    clearInterval(slideInterval);
    for (k = 0; k < div.length; k++) {
        div[k].className = div[k].className.replace(" running", " paused");
    }
}

function playSlideshow(){
    pauseButton.innerHTML = '&#10073;&#10073;';
    playing = true;
    slideInterval = setInterval(carousel, globaltime);
    for (k = 0; k < div.length; k++) {
        div[k].className = div[k].className.replace(" paused", " running");
    }
}

function stop(){
    if(playing){
        pauseSlideshow();
    }
    else {
        playSlideshow();
    }
}

carousel();
timer();
showDivs(slideIndex);

Thank you very much in advance for your time, patience and understanding.