如何在最后一张幻灯片中停止我的 html 演示？

Question

I'm making a html presentation. It had 15 slides. I have it all working but when I get to the last slide you can continue pressing the left arrow key(the key press that goes to the next slide) to go to slides that I'm not using or even expecting to be there. How can I stop the transition from slide to slide at the last slide.

this is all my javascript

var Slides = {
    currentSlide: 0,
    totalSlides: '',
    slideWidth: '',
    translateAmount: 0,
    container: $("#slides"),

    init: function(totalSlides) {
        var each;

        if(!totalSlides) throw new Error('Please pass the number of slides');
        Slides.totalSlides = totalSlides;
        Slides.loadContent();
        each = Slides.container.children('div');
        Slides.slideWidth = each.width() + (parseInt(each.css('margin-right'), 10));
        Slides.keyPress();
    },
    loadContent: function() {
        Slides.container.hide();
        for (var i = 0; i < Slides.totalSlides; i++) {
            $('<div id="#slide-' +i+ '"></div>')
            .load('slides/' +i+ '.html')
            .appendTo(Slides.container);
        }
        Slides.container.show();
    },
    keyPress: function() {
        $(document.body).keydown(function(e) {
            if(e.keyCode === 39 || e.keyCode === 37) {
                e.preventDefault();
                (e.keyCode === 39)?Slides.next():Slides.prev();
            }
        });
    },
    next: function() {
        Slides.translateAmount -= Slides.slideWidth;
        Slides.updateHash(++Slides.currentSlide);
        Slides.animate();
    },
    prev: function() {
        if(Slides.translateAmount === 0) return;

        Slides.translateAmount += Slides.slideWidth;
        Slides.updateHash(--Slides.currentSlide);
        Slides.animate();
    },
    animate: function() {
        Slides.container
            .children()
                .css('-webkit-transform', 'translateX(' +Slides.translateAmount+ 'px)');

    },
    updateHash: function() {
        location.hash = '#slide-' +Slides.currentSlide;
    }
}

Slides.init(15);

Answer 1

You can check if currentSlide is equal to 14 (assuming slides start from 0). If its true, just return from the next function

next: function() {
    if (currentSlide === 14)   
        return;

    Slides.translateAmount -= Slides.slideWidth;
    Slides.updateHash(++Slides.currentSlide);
    Slides.animate();
}