picpoint/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <div class="slider">
    <img src="" alt="picture">
  </div>
 <script src="slider.js"></script>
</body>
</html>

## script.js
let arr = ['01.jpg', '02.jpg', '03.jpg', '04.jpg'];
let slidBlock = document.querySelector('.slider');
let btnleft = document.querySelector('.btnleft');
let btnright = document.querySelector('.btnright');


class Slider {
  constructor(parentblock, arr) {
    this.parentblock = parentblock;
    this.arr = arr;
  }

  showSlider() {
    let wdthScreen = document.documentElement.clientWidth;
    for(let x = 0; x < this.arr.length; x++) {
      this.parentblock.firstElementChild.setAttribute('src', `pict/${this.arr[0]}`);
      this.parentblock.firstElementChild.style.position = 'relative';
    }

    let count = 1;
    setInterval(() => {
      if(count >= this.arr.length) {
        count = 0;
        this.parentblock.firstElementChild.setAttribute('src', `pict/${this.arr[count++]}`);
        this.parentblock.firstElementChild.style.position = 'relative';
      } else {
        this.parentblock.firstElementChild.setAttribute('src', `pict/${this.arr[count++]}`);
      }
    }, 5000);

  }

}

let shw = new Slider(slidBlock, arr);
shw.showSlider();

## style.css
.slider {
  border: 1px solid red;
  display: flex;
  width: 100%;
  height: 400px;
}

.slider img {
  width: 100%;
  height: 100%;
  animation: animationsslider 5s infinite;
}

.btns {
  display: flex;
  justify-content: center;
}

.btns button {
  width: 150px;
  height: 50px;
  margin: 0 20px;
}


@keyframes animationsslider {
  0% {
    opacity: 0.05;
    animation-timing-function: ease-in-out;
  }

  5% {
    opacity: 0.1;
    animation-timing-function: ease-in-out;
  }

  10% {
    opacity: 0.2;
    animation-timing-function: ease-in-out;
  }

  15% {
    opacity: 0.3;
    animation-timing-function: ease-in-out;
  }

  20% {
    opacity: 0.4;
    animation-timing-function: ease-in-out;
  }

  25% {
    opacity: 0.5;
    animation-timing-function: ease-in-out;
  }

  30% {
    opacity: 0.6;
    animation-timing-function: ease-in-out;
  }

  35% {
    opacity: 0.7;
    animation-timing-function: ease-in-out;
  }

  40% {
    opacity: 0.8;
    animation-timing-function: ease-in-out;
  }

  45% {
    opacity: 0.9;
    animation-timing-function: ease-in-out;
  }

  50% {
    opacity: 1;
    animation-timing-function: ease-in-out;
  }

  55% {
    opacity: 0.9;
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 0.8;
    animation-timing-function: ease-in-out;
  }

  65% {
    opacity: 0.7;
    animation-timing-function: ease-in-out;
  }

  70% {
    opacity: 0.6;
    animation-timing-function: ease-in-out;
  }

  75% {
    opacity: 0.5;
    animation-timing-function: ease-in-out;
  }

  80% {
    opacity: 0.4;
    animation-timing-function: ease-in-out;
  }

  85% {
    opacity: 0.3;
    animation-timing-function: ease-in-out;
  }

  90% {
    opacity: 0.2;
    animation-timing-function: ease-in-out;
  }

  95% {
    opacity: 0.1;
    animation-timing-function: ease-in-out;
  }

  100% {
    opacity: 0;
    animation-timing-function: ease-in-out;
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
	</head>
	<body>
	<div class="slider">
	<img src="" alt="picture">
	</div>
	<script src="slider.js"></script>
	</body>
	</html>
	let arr = ['01.jpg', '02.jpg', '03.jpg', '04.jpg'];
	let slidBlock = document.querySelector('.slider');
	let btnleft = document.querySelector('.btnleft');
	let btnright = document.querySelector('.btnright');



	class Slider {
	constructor(parentblock, arr) {
	this.parentblock = parentblock;
	this.arr = arr;
	}

	showSlider() {
	let wdthScreen = document.documentElement.clientWidth;
	for(let x = 0; x < this.arr.length; x++) {
	this.parentblock.firstElementChild.setAttribute('src', `pict/${this.arr[0]}`);
	this.parentblock.firstElementChild.style.position = 'relative';
	}

	let count = 1;
	setInterval(() => {
	if(count >= this.arr.length) {
	count = 0;
	this.parentblock.firstElementChild.setAttribute('src', `pict/${this.arr[count++]}`);
	this.parentblock.firstElementChild.style.position = 'relative';
	} else {
	this.parentblock.firstElementChild.setAttribute('src', `pict/${this.arr[count++]}`);
	}
	}, 5000);

	}

	}

	let shw = new Slider(slidBlock, arr);
	shw.showSlider();
	.slider {
	border: 1px solid red;
	display: flex;
	width: 100%;
	height: 400px;
	}

	.slider img {
	width: 100%;
	height: 100%;
	animation: animationsslider 5s infinite;
	}

	.btns {
	display: flex;
	justify-content: center;
	}

	.btns button {
	width: 150px;
	height: 50px;
	margin: 0 20px;
	}


	@keyframes animationsslider {
	0% {
	opacity: 0.05;
	animation-timing-function: ease-in-out;
	}

	5% {
	opacity: 0.1;
	animation-timing-function: ease-in-out;
	}

	10% {
	opacity: 0.2;
	animation-timing-function: ease-in-out;
	}

	15% {
	opacity: 0.3;
	animation-timing-function: ease-in-out;
	}

	20% {
	opacity: 0.4;
	animation-timing-function: ease-in-out;
	}

	25% {
	opacity: 0.5;
	animation-timing-function: ease-in-out;
	}

	30% {
	opacity: 0.6;
	animation-timing-function: ease-in-out;
	}

	35% {
	opacity: 0.7;
	animation-timing-function: ease-in-out;
	}

	40% {
	opacity: 0.8;
	animation-timing-function: ease-in-out;
	}

	45% {
	opacity: 0.9;
	animation-timing-function: ease-in-out;
	}

	50% {
	opacity: 1;
	animation-timing-function: ease-in-out;
	}

	55% {
	opacity: 0.9;
	animation-timing-function: ease-in-out;
	}

	60% {
	opacity: 0.8;
	animation-timing-function: ease-in-out;
	}

	65% {
	opacity: 0.7;
	animation-timing-function: ease-in-out;
	}

	70% {
	opacity: 0.6;
	animation-timing-function: ease-in-out;
	}

	75% {
	opacity: 0.5;
	animation-timing-function: ease-in-out;
	}

	80% {
	opacity: 0.4;
	animation-timing-function: ease-in-out;
	}

	85% {
	opacity: 0.3;
	animation-timing-function: ease-in-out;
	}

	90% {
	opacity: 0.2;
	animation-timing-function: ease-in-out;
	}

	95% {
	opacity: 0.1;
	animation-timing-function: ease-in-out;
	}

	100% {
	opacity: 0;
	animation-timing-function: ease-in-out;
	}
	}