oleg901,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style>
.content .slider .wrap{
margin: 50px auto;
position: relative;
display: in;
}
.content .slider .wrap .slider-item {
position: absolute;
transition: .8s;
opacity: 0;
text-align: center;
height: auto;
}
.content .slider .wrap .slider-item.open{
opacity: 1;
}
.content .slider .wrap .slider-item img {
width: 100%;
height: auto;
}
.content .slider .wrap .prev, .content .slider .wrap .next{
color:hsl(0, 0%, 100%);
position: absolute;
cursor: pointer;
top: 0;
width: 90px;
left: 0;
background-color: rgba(0, 0, 0, 0);
-webkit-transition: .3s;
transition: .3s;
height: 100px;
}
.content .slider .wrap .next{
left: auto;
right: 0;
}
</style>
</head>
<body>
<div class="content">
<div class="container" id="about">
<div class="slider" id="photo">
<div class="wrap">
<div class="slider-item fade">
<img src="https://bipbap.ru/wp-content/uploads/2017/04/2-8.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade ">
<img src="https://i.pinimg.com/originals/45/37/8e/45378eb16e35d31ebe01048984cca472.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade">
<img src="http://www.kartinki24.ru/uploads/gallery/main/34/kartinki24_fantasu_girls_0019.jpg" alt="slider" height='900px' width='200px'>
</div>
<div class="slider-item fade">
<img src="https://klike.net/uploads/posts/2018-11/1541400530_1.jpg" alt="slider" height='900px' width='200px'>
</div>
<button class="prev">назад</button>
<button class="next">вперед</button>
</div>
</div>
</div>
</div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var slider = document.querySelector(".slider"),
slider_element = slider.querySelectorAll(".slider-item"),
index = 0,
length = slider_element.length,
setIndex = function(i) {
slider_element[index].classList.remove("open");
index = (index + length - i) % length;
slider_element[index].classList.add("open");
}
slider_element[index].classList.add("open");
slider.addEventListener("click", function(e) {
if (e.target.closest(".next")) {
setIndex(1)
}
if (e.target.closest(".prev")) {
setIndex(-1)
}
})
});
</script>
</body>
</html>