具有暂停和恢复功能的自动滑块

Question

我有一个滑块，我想使用暂停和恢复功能使其自动化。我发现了这段很棒的代码片段，使我可以暂停和继续，但是，它只允许我暂停一次。

我正在努力弄清楚如何做到这一点，以便用户可以随意停顿多次。

这是完整的代码：

    $s = 1000;  // slide transition speed (for sliding carousel)
    $d = 5000;  // duration per slide

    $w = $('.slide').width(); // slide width

    function IntervalTimer(callback, interval) {

        var timerId, startTime, remaining = 0;
        var state = 0; //  0 = idle, 1 = running, 2 = paused, 3= resumed

        this.pause = function () {
            if (state != 1) return;

            remaining = interval - (new Date() - startTime);
            window.clearInterval(timerId);
            state = 2;

            $('.timer').stop(true, false)

        };

        this.resume = function () {
            if (state != 2) return;

            state = 3;
            window.setTimeout(this.timeoutCallback, remaining);

            $('.timer').animate({"width":$w}, remaining);
            $('.timer').animate({"width":0}, 0);

        };

        this.timeoutCallback = function () {
            if (state != 3) return;

            callback();

            startTime = new Date();
            timerId = window.setInterval(callback, interval);
            state = 1;
        };

        startTime = new Date();
        timerId = window.setInterval(callback, interval);
        state = 1;
    }

    var starttimer = new IntervalTimer(function () {
        autoSlider()
    }, $d);


    timer();

    $('.slider-content').hover(function(ev){
        starttimer.pause()
    }, function(ev){
        starttimer.resume()
    });

    function timer() {
        $('.timer').animate({"width":$w}, $d);
        $('.timer').animate({"width":0}, 0);
    }

非常感谢您的帮助。

更新：

这是HTML

<div class="slider-content">
    <div class="timer"></div>
    <div class="slide 1">
        <div class="hero-container">
            <div class="header-content-container">
                <h1 class="entry-title"></h1>
                <hr>
                <div class="flex-container">
                    <div class="col1"></div>
                    <div class="col2"></div>
                </div>
                <div class="post-link"><a href=""></a></div>
            </div>
        </div>
    </div>
    <div class="slide 2">
        <div class="hero-container">
            <div class="header-content-container">
                <h1 class="entry-title"></h1>
                <hr>
                <div class="flex-container">
                    <div class="col1"></div>
                    <div class="col2"></div>
                </div>
                <div class="post-link"><a href=""></a></div>
            </div>
        </div>
    </div>
    <div class="slide 3">
        <div class="hero-container">
            <div class="header-content-container">
                <h1 class="entry-title"></h1>
                <hr>
                <div class="flex-container">
                    <div class="col1"></div>
                    <div class="col2"></div>
                </div>
                <div class="post-link"><a href=""></a></div>
            </div>
        </div>
    </div>
    <div class="slide 4">
        <div class="hero-container">
            <div class="header-content-container">
                <h1 class="entry-title"></h1>
                <hr>
                <div class="flex-container">
                    <div class="col1"></div>
                    <div class="col2"></div>
                </div>
                <div class="post-link"><a href=""></a></div>
            </div>
        </div>
    </div>
</div>