SkynI25/index.html

## index.html
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Marvel Slider</title>
</head>
<body>
    <header class="header">
        <h1 class="title">Marvel</h1>
    </header>
    <section class="slider">
        <i class="far fa-arrow-alt-circle-left fa-2x clickable left-arrow"></i>
        <i class="far fa-arrow-alt-circle-right fa-2x clickable right-arrow"></i>
        <div class="img-block">
            <img src="img/5.png" id="last-img" />
            <img src="img/1.png"/>
            <img src="img/2.png"/>
            <img src="img/3.png"/>
            <img src="img/4.png"/>
            <img src="img/5.png"/>
            <img src="img/1.png" id="first-img" />
        </div>

        <div class="slider__current-page">
            <i class="fas fa-stop"></i>
            <i class="fas fa-stop"></i>
            <i class="fas fa-stop"></i>
            <i class="fas fa-stop"></i>
            <i class="fas fa-stop"></i>
        </div>
    </section>
    <script src="./slider.js"></script>
</body>
</html>

## slider.js
class Slider {
    constructor() {
        this.$imgBlock = document.querySelector('.img-block');
        this.$imgs = this.$imgBlock.querySelectorAll('img');
        this.$currBar = document.querySelectorAll('.slider__current-page i');
        this.$leftArrow = document.querySelector('.left-arrow');
        this.$rightArrow = document.querySelector('.right-arrow');
        this.counter = 1;
        this.size = this.$imgs[0].clientWidth;

        this.transformImg();
        this.slideImg();
        this.clickArrow();
        this.transitionEnd();
    }

    transformImg() {
        this.$imgBlock.style.transform = `translateX(${-this.size * this.counter}px)`;
        this.paintBar();
    }

    transitionEnd() {
        this.$imgBlock.addEventListener('transitionend', () => {
            if(this.$imgs[this.counter].id === 'first-img') {
                this.$imgBlock.style.transition = 'none';
                this.counter = this.$imgs.length - this.counter;
                this.transformImg();
            } else if(this.$imgs[this.counter].id === 'last-img') {
                this.$imgBlock.style.transition = 'none';
                this.counter = this.$imgs.length - 2;
                this.transformImg();
            }
        });
    }

    paintBar() {
        const totalIMG = this.$currBar.length;
        const barRange = 4;
        let currImg = this.counter < 1 ? this.counter : this.counter - 1;
        if(currImg > barRange) {
            currImg -= (barRange+1);
        }
        let prevImg = currImg < 1 ? totalIMG - 1: currImg - 1;
        let nextImg = currImg > 3 ? 0 : currImg + 1;
        this.$currBar[nextImg].style.opacity = "0.5";
        this.$currBar[prevImg].style.opacity = "0.5";
        this.$currBar[currImg].style.opacity = "1";
    }

    slideImg() {
        setInterval(() => {
            if(this.counter >= this.$imgs.length - 1) {
                return;
            }
            this.$imgBlock.style.transition = "transform .5s ease-in-out";
            this.counter++;
            this.transformImg();
        }, 2000);
    }

    clickArrow() {
        this.$rightArrow.addEventListener('click', () => {
            if(this.counter >= this.$imgs.length - 1) {
                return;
            }
            this.$imgBlock.style.transition = "transform .3s ease-in-out";
            this.counter++;
            this.transformImg();
        });

        this.$leftArrow.addEventListener('click', () => {
            if(this.counter <= 0) {
                return;
            }
            this.$imgBlock.style.transition = "transform .3s ease-in-out";
            this.counter--;
            this.transformImg();
        });
    }
}

const slider = new Slider();
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Marvel Slider</title>
	</head>
	<body>
	<header class="header">
	<h1 class="title">Marvel</h1>
	</header>
	<section class="slider">
	<i class="far fa-arrow-alt-circle-left fa-2x clickable left-arrow"></i>
	<i class="far fa-arrow-alt-circle-right fa-2x clickable right-arrow"></i>
	<div class="img-block">
	<img src="img/5.png" id="last-img" />
	<img src="img/1.png"/>
	<img src="img/2.png"/>
	<img src="img/3.png"/>
	<img src="img/4.png"/>
	<img src="img/5.png"/>
	<img src="img/1.png" id="first-img" />
	</div>

	<div class="slider__current-page">
	<i class="fas fa-stop"></i>
	<i class="fas fa-stop"></i>
	<i class="fas fa-stop"></i>
	<i class="fas fa-stop"></i>
	<i class="fas fa-stop"></i>
	</div>
	</section>
	<script src="./slider.js"></script>
	</body>
	</html>
	class Slider {
	constructor() {
	this.$imgBlock = document.querySelector('.img-block');
	this.$imgs = this.$imgBlock.querySelectorAll('img');
	this.$currBar = document.querySelectorAll('.slider__current-page i');
	this.$leftArrow = document.querySelector('.left-arrow');
	this.$rightArrow = document.querySelector('.right-arrow');
	this.counter = 1;
	this.size = this.$imgs[0].clientWidth;

	this.transformImg();
	this.slideImg();
	this.clickArrow();
	this.transitionEnd();
	}

	transformImg() {
	this.$imgBlock.style.transform = `translateX(${-this.size * this.counter}px)`;
	this.paintBar();
	}

	transitionEnd() {
	this.$imgBlock.addEventListener('transitionend', () => {
	if(this.$imgs[this.counter].id === 'first-img') {
	this.$imgBlock.style.transition = 'none';
	this.counter = this.$imgs.length - this.counter;
	this.transformImg();
	} else if(this.$imgs[this.counter].id === 'last-img') {
	this.$imgBlock.style.transition = 'none';
	this.counter = this.$imgs.length - 2;
	this.transformImg();
	}
	});
	}

	paintBar() {
	const totalIMG = this.$currBar.length;
	const barRange = 4;
	let currImg = this.counter < 1 ? this.counter : this.counter - 1;
	if(currImg > barRange) {
	currImg -= (barRange+1);
	}
	let prevImg = currImg < 1 ? totalIMG - 1: currImg - 1;
	let nextImg = currImg > 3 ? 0 : currImg + 1;
	this.$currBar[nextImg].style.opacity = "0.5";
	this.$currBar[prevImg].style.opacity = "0.5";
	this.$currBar[currImg].style.opacity = "1";
	}

	slideImg() {
	setInterval(() => {
	if(this.counter >= this.$imgs.length - 1) {
	return;
	}
	this.$imgBlock.style.transition = "transform .5s ease-in-out";
	this.counter++;
	this.transformImg();
	}, 2000);
	}

	clickArrow() {
	this.$rightArrow.addEventListener('click', () => {
	if(this.counter >= this.$imgs.length - 1) {
	return;
	}
	this.$imgBlock.style.transition = "transform .3s ease-in-out";
	this.counter++;
	this.transformImg();
	});

	this.$leftArrow.addEventListener('click', () => {
	if(this.counter <= 0) {
	return;
	}
	this.$imgBlock.style.transition = "transform .3s ease-in-out";
	this.counter--;
	this.transformImg();
	});
	}
	}

	const slider = new Slider();