Сергей Ракипов,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
border: none;
outline: none;
line-height: -.36em;
font-size: 0;
word-spacing: -.36em;
zoom: 1;
}
:root{
--tsvet_tekst: #fff;
}
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
position: relative;
}
.naivigat{
position: fixed;
top: 10px;
left: calc(50% - 50px);
width: 100px;
height: 50px;
z-index: 100;
cursor: pointer;
display: table;
}
.sledushay{
width: 50px;
height: 50px;
background-color: #2e2e2e;
display: inline-block;
}
.prededushay{
width: 50px;
height: 50px;
background-color: gray;
display: inline-block;
}
.portfolio_blok{
display: grid;
grid-template-columns: 50vw 50vw;
grid-template-rows: 100vh;
grid-template-areas: "danyi_blok foto_blok";
}
.danyi_blok{
grid-area: danyi_blok;
background-color: gray;
}
.foto_blok{
grid-area: foto_blok;
background-color: #2e2e2e;
overflow: hidden;
display: table;
}
.foto_blok_obertka{
width: 250vw;
display: flex;
transform: translateX(var(--move, 0));
transition: transform var(--duration, 1s) linear;
}
.foto{
font-size: 30px;
color: hsla(0, 0%, 100%, 1);
text-align: center;
line-height: 100vh;
}
.foto:nth-child(1){
width: 50vw;
height: 100vh;
background-color:lightcoral;
}
.foto:nth-child(2){
width: 50vw;
height: 100vh;
background-color:dodgerblue;
}
.foto:nth-child(3){
width: 50vw;
height: 100vh;
background-color:darksalmon;
}
.foto:nth-child(4){
width: 50vw;
height: 100vh;
background-color:cadetblue;
}
.foto:nth-child(5){
width: 50vw;
height: 100vh;
background-color:burlywood;
}
</style>
<title>Document</title>
</head>
<body>
<div class="naivigat">
<div class="sledushay"></div>
<div class="prededushay"></div>
</div>
<div class="portfolio_blok">
<div class="danyi_blok">
<div class="info_1">
</div>
</div>
<div class="foto_blok">
<div class="foto_blok_obertka">
<div class="foto">1</div>
<div class="foto">2</div>
<div class="foto">3</div>
<div class="foto">4</div>
<div class="foto">5</div>
</div>
</div>
</div>
<script>
"use strict"
const sledushay = document.querySelector(".sledushay");
const prededushay = document.querySelector(".prededushay");
const fotoBlokObertka = document.querySelector(".foto_blok_obertka")
const foto = document.querySelectorAll(".foto");
let i = 0;
let setIndex = up => i = (i + up + foto.length) % foto.length;
sledushay.addEventListener("click", function () {
setIndex(1);
fotoBlokObertka.style.setProperty("--duration", `${i ? 1 : 0}s`);
fotoBlokObertka.style.setProperty("--move", `${-i * 50}vw`);
})
prededushay.addEventListener("click", function () {
setIndex(-1);
fotoBlokObertka.style.setProperty("--duration", `${i == foto.length - 1 ? 0 : 1}s`);
fotoBlokObertka.style.setProperty("--move", `${-i * 50}vw`);
})
</script>
</body>
</html>