Нужно что бы кликая по стрелку сдвигалось на одну картинку, достигнув конца прекратило сдвигается. То есть не бесконечная карусель.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.foto {
position: relative;
top: 0px;
width: 640px;
margin: 100px auto 0px;
}
.foto_blok{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: hidden;
}
.foto_blok img{
}
.strelka_1{
width: 40px;
height: 320px;
position: absolute;
top: 0px;
left: 0px;
cursor: pointer;
background-image: url(https://www.rakipov.ru/files/strelka.svg);
background-repeat: no-repeat;
background-position: top left;
opacity: .8;
z-index: 10;
}
.strelka_2{
width: 40px;
height: 320px;
position: absolute;
top: 0px;
right: 0px;
cursor: pointer;
background-image: url(https://www.rakipov.ru/files/strelka.svg);
background-repeat: no-repeat;
background-position: top right;
opacity: .8;
transform: rotate(180deg);
z-index: 10;
}
</style>
</head>
<body>
<div class="foto">
<div class="strelka_1"></div>
<div class="foto_blok">
<img src="https://www.rakipov.ru/files/1.jpg" height="320" width="320" alt="">
<img src="https://www.rakipov.ru/files/2.jpg" height="320" width="320" alt="">
<img src="https://www.rakipov.ru/files/3.jpg" height="320" width="320" alt="">
<img src="https://www.rakipov.ru/files/4.jpg" height="320" width="320" alt="">
<img src="https://www.rakipov.ru/files/5.jpg" height="320" width="320" alt="">
<img src="https://www.rakipov.ru/files/6.jpg" height="320" width="320" alt="">
<img src="https://www.rakipov.ru/files/7.jpg" height="320" width="320" alt="">
<img src="https://www.rakipov.ru/files/9.jpg" height="320" width="320" alt="">
</div>
<div class="strelka_2"></div>
</div>
<script>
const strelka_1 = document.querySelector(".strelka_1");
const strelka_2 = document.querySelector(".strelka_2");
const foto_blok = document.querySelector(".foto_blok");
let slader_2 = () => {
console.log(`клик2`);
}
strelka_2.addEventListener("click", slader_2);
let slader_1 = () => {
console.log(`клик1`);
}
strelka_1.addEventListener("click", slader_1);
</script>
</body>
</html>
Не могу понять что и как смещать, влево и вправо, пробую и отступом, и позицией, и трансформом, и все как то коряво.