JS thumbnail slider

thumbnailSlider.js

/**
 * Initiliaze the thumbnailslider
 */
$(document).ready(() => {
    new thumbnailSlider();
});

/**
 * Thumbnail slider for products with more then a configurable amount of images (3  by default)
 */
class thumbnailSlider {
    constructor() {
        this.thumbs = this.getThumbnails();
        this.maxOnScreen = 3;
        this.first = false;
        this.last = false;
        this.$next = $('#next_image');
        this.$previous = $('#previous_image');
        this.hideOverflow();
        this.disableButtons();
        this.registerActions();
    }

    /**
     * Set the selector for each image item
     * @returns {*|jQuery}
     */
    getThumbnails() {
        return $('#thumbnail_selector').find('.thumbs-list-item').toArray();
    }

    /**
     * Upon initialization hide the elements whoms indexes are above maxOnScreen
     */
    hideOverflow() {
        $.each(this.thumbs, (index, value) => {
            if (index >= (this.maxOnScreen)) {
                $(value).hide();
            }
        })
    }

    /**
     * Get the indexes of the first and the last images on screen
     */
    getFirstAndLastVisible() {
        this.first = false;
        this.last = false;
        $.each(this.thumbs, (index, value) => {
            if ($(value).is(":visible")) {
                if (this.first === false) {
                    this.first = index;
                }
                this.last = index;
            }
        });
    }

    /**
     * If the last image is on screen disable the last button and
     * if the first image is on screen disable the first button
     */
    disableButtons() {
        this.getFirstAndLastVisible();
        if (this.first === 0) {
            this.$previous.attr("disabled", "disabled");
        } else {
            this.$previous.removeAttr("disabled");
        }

        if (this.last === this.thumbs.length - 1) {
            this.$next.attr("disabled", "disabled");
        } else {
            this.$next.removeAttr("disabled");
        }
    }

    /**
     * - Check to make sure the button isn't disabled upon click
     * - Set button to disabled
     * - Get first and last visible image indexes
     * - fire the animation
     * - after animation reanble the button that was clicked and the call
     * the disablButtons function to disable buttons depending on which images are currently on screen
     */
    registerActions() {
        this.$previous.on('click', (e) => {
            if (!this.$previous.is(":disabled")) {
                this.$previous.attr("disabled", "disabled");
                this.getFirstAndLastVisible();
                $(this.thumbs[this.last]).animate({width: 'toggle'}, 300, () => {
                    this.$previous.removeAttr("disabled");
                    this.disableButtons();
                });
                $(this.thumbs[this.first - 1]).animate({width: 'toggle'});
            }
        });

        this.$next.on('click', (e) => {
            if (!this.$next.is(":disabled")) {
                this.$next.attr("disabled", "disabled");
                this.getFirstAndLastVisible();
                $(this.thumbs[this.last + 1]).animate({width: 'toggle'});
                $(this.thumbs[this.first]).animate({width: 'toggle'}, 300, () => {
                    this.$next.removeAttr("disabled");
                    this.disableButtons();
                });
            }
        });
    }
}