Javascript-форум - Сдвиг блоков

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Сдвиг блоков (https://javascript.ru/forum/misc/80482-sdvig-blokov.html)

Сдвиг блоков

У меня задача что блоки смешались друг за другом
Ниже код но скрипт, это моя попытка, он закомментирован так как он не работает так как нужно.

<!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 не знает таких значений.

Вообщем при нажатии на верхний квадраты, вперед назад левая половина двигается а правая стоит на месте.

Вот может быть понятнее будет

https://skr.sh/s2bio7lgGbM

Сергей Ракипов,
а можно как-то совсем просто объяснить, что хотите сделать?

Две кнопки

.sledushay
.prededushay

есть блоки

<div class="foto"></div>
<div class="foto"></div>
<div class="foto"></div>
<div class="foto"></div>
<div class="foto"></div>

они должны сменять друг друга

нажимаешь .sledushay блок смешается влево
нажимаешь .prededushay блок смешается вправо

все идет по кругу.

Смена идет анимацией что один блок смешает другой.
"translateX(" + "-50" + "vw)";

Сергей Ракипов,
это слайдер на два фото?

рони,
Планируется что будет смещаться блок в котором будет и фото, и текст и разные блоки. Блок занимает 100vh и ширина 50vw
И этих блоков может быть штук 30

слайдер на половину окна

Сергей Ракипов,

<!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>

рони,
Завтра с утра сяду разбираться, так не много пробежался и часть понятно, часть нет.
Но вот это я совсем не понял

let setIndex = up => i = (i + up + foto.length) % foto.length;

как это понять?

Цитата:

Сообщение от Сергей Ракипов

как это понять?

https://javascript.ru/forum/css-html...tml#post525601

рони,
Как всегда огромное спасибо.

рони,
Я пробовал искать про метод setProperty но на русском языке нету не чего. Можете объяснить зачем он.
И почему на мобильных устройствах эффект сдвига отсутствует, есть какие то особенности?
Можете сами посмотреть вот на моем сайте в тестовой директории
https://rakipov.ru/test/
И я понял как вы сделали, сделали общую длину блока и поделили. И в когда идет по кругу кончено эффект сдвига в конце отсутствует.
А как убрать это движение по кругу.
И насколько сложно сделать что бы по свайпу в телефоне блоки двигались, это нужно подключить какие то библиотеки или досточно какой то команды.

Цитата:

Сообщение от Сергей Ракипов

А как убрать это движение по кругу.

так вернитесь к прежнему условию
if(--i < 0) i = 0;

if(++i == foto.length) i = foto.length -1;

вместо setIndex

рони,
Спасибо по изучаю