У меня задача что блоки смешались друг за другом
Ниже код но скрипт, это моя попытка, он закомментирован так как он не работает так как нужно.
<!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;
}
.foto{
transition: all 1s;
display: inline-block;
line-height: -.36em;
font-size: 0;
word-spacing: -.36em;
zoom: 1;
}
.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"></div>
<div class="foto"></div>
<div class="foto"></div>
<div class="foto"></div>
<div class="foto"></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 sdvig = 50;
let i = 0;
// sledushay.onclick = function(){
// fotoBlokObertka.style.transform = "translateX(-50vw)";
// }
// prededushay.onclick = function(){
// }
// "translateX(" + "-50" + "vw)";
// sledushay.onclick = function(){
// foto[i].style.transform = "translateX("+"-50"+"vw)";
// i++;
// if (i >= foto.length){
// i = 0;
// }
// foto[i].classList.remove("sdvig");
// console.log("!")
// }
// prededushay.onclick = function(){
// foto[i].style.transform = "translateX("+"-50"+"vw)";
// i--;
// if(i < 0){
// i = foto.length - 1;
// }
// foto[i].classList.remove("sdvig");
// console.log("!!")
// }
</script>
</body>
</html>
Что я пробовал, смешать каждый блок, что то не выходит так как нужно, так как по отдельности они смешаются но не друг за другом.
Смешать целый блок, но проблема в том что он смешается один раз на нужное расстояние а потом не понятно что делать, думал получить значение на сколько он сместился и прибавлять еще 50vw но на сколько я знаю js не знает таких значений.
Вообщем при нажатии на верхний квадраты, вперед назад левая половина двигается а правая стоит на месте.
