How to make this slider stop at the final slide?

Question

I have a carousel text that automatically plays through without stopping. Is there a way to make it stop at the last word? Here is the code http://codepen.io/anon/pen/kyiqn

(function () {
    rt.Homepage = function () {
        function e() {
            var e = this;
            this.currentCaption = 0, this.$carousel = $(".js-carousel"), this.$captions = $(".js-captions"), this.switchCaption(1), setInterval(function () {
                return e.advanceCaption()
            }, 2000), this.addHandlers()
        }
        return e.prototype.addHandlers = function () {}, 

        e.prototype.advanceCaption = function () {
            var e, t;
            return this.currentCaption++, t = 20, e = this.currentCaption % t + 1, this.switchCaption(e)
        }, e.prototype.switchCaption = function (e) {
            var t, n, r, i, s, o, u = this;
            n = "state-1 state-2 state-3 state-4 state-5 state-6 state-7 state-8 state-9 state-10 state-11 state-12 state-13 state-14 state-15 state-16 state-17 state-18 state-19 state-20", this.$carousel.removeClass(n).addClass("state-" + e), o = this.$captions;
            for (i = 0, s = o.length; i < s; i++) t = o[i], r = $(".caption-" + e, t).width(), $(t).width(r);
            return _.delay(function () {
                return u.$carousel.addClass("show-caption")
            }, 500)
        }, e
    }(), $(function () {
        return new rt.Homepage
    })
}).call(this);

Answer 1

I've edited it to do what you want, and I've made the javascript (slightly) clearer so you can see what's going on. If you do have the un-minified javascript, I would recommend making similar edits to that instead.

CodePen

(function () {
    rt.Homepage = function () {
        function e() {
            var e = this;
            this.currentCaption = 0;
            this.$carousel = $(".js-carousel");
            this.$captions = $(".js-captions");
            this.switchCaption(1);

            // set a variable for the interval, so we can stop it later
            this.interval = setInterval(function () {
                return e.advanceCaption()
            }, 1500);

            this.addHandlers();
        }

        e.prototype.addHandlers = function () {}

        e.prototype.advanceCaption = function () {
            this.currentCaption++;

            // if currentCaption reaches final caption, stop the interval
            if (this.currentCaption >= 4) {
                clearInterval(this.interval)
            }

            return this.switchCaption(this.currentCaption + 1);
        }

        e.prototype.switchCaption = function (e) {
            var t, n, r, i, s, o, u = this;
            n = "state-1 state-2 state-3 state-4 state-5";
            this.$carousel.removeClass(n).addClass("state-" + e);
            o = this.$captions;
            for (i = 0, s = o.length; i < s; i++) t = o[i];
            r = $(".caption-" + e, t).width(), $(t).width(r);
            return _.delay(function () {
                return u.$carousel.addClass("show-caption")
            }, 500)
        }

        return e;
    }(), $(function () {
        return new rt.Homepage
    })
}).call(this);