jsGalleryClass

<!DOCTYPE html>
<html lang="en" id="html">
<head>
    <meta charset="UTF-8">
    <title>GalleryClass</title>
    <style>
        html,
        body {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .container {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-content: center;
            align-items: center;
            margin-top: 30px;
        }

        .gallery {
            width: 50%;
            padding: 50px;
        }

        .inactive {
            opacity: 0.4 !important;
        }

        .nav {
            opacity: 1;
            width: 20%;
            font-size: 80px;
            padding: 50px;
        }
    </style>
</head>
<body>
    <div id="container" class="container">
    </div>
    <script>
        'use strict'

        class Gallery {
            constructor(container, arrImage) {
                this._containerId = container;
                this._container = document.getElementById(container);
                this._arrImage = arrImage;

                this._render();
                this._container.addEventListener('click', this);
                this.idx = 0;
            }

            _render() {
                this._container.insertAdjacentHTML('afterbegin', `<div id="${this._containerId}prev" class="nav" tabindex="0">&#x21E6;</div>`);
                this._prev = document.getElementById(`${this._containerId}prev`);
                this._container.insertAdjacentHTML('beforeend', `<div class="gallery"><img id="${this._containerId}img" src="html.png"></div>`);
                this._img = document.getElementById(`${this._containerId}img`);
                this._container.insertAdjacentHTML('beforeend', `<div id="${this._containerId}next" class="nav" tabindex="0">&#x21E8;</div>`);
                this._next = document.getElementById(`${this._containerId}next`);
            }

            set idx(val) {
                this._idx = val;
                if (this._idx == 0) {
                    this._prev.classList.add('inactive');
                    return;
                }
                if (this._idx == this._arrImage.length - 1) {
                    this._next.classList.add('inactive');
                    return;
                }
                if (this._idx == this._arrImage.length - 2 || this._idx == 1) {
                    this._prev.classList.remove('inactive');
                    this._next.classList.remove('inactive');
                    return;
                }
            }

            get idx() { return this._idx; }

            handleEvent(event) {
                this[`on${event.type[0].toUpperCase()}${event.type.slice(1)}`](event);
            }

            onClick(event) {
                if ((event.target == this._prev && this.idx > 0) || (event.target == this._next && this.idx < this._arrImage.length - 1)) {
                    if (event.target == this._prev) {
                        --this.idx;
                    }
                    else {
                        ++this.idx;
                    }
                    this._img.src = this._arrImage[this.idx];
                }
            }
        }
        {
            let arrImage = ["html.png", "css.png", "js.png"];
            let gallery = new Gallery("container", arrImage);
        }
    </script>
</body>
</html>