Сергей Ракипов,
в примере ниже, картинки разной ширины.
<!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;
overflow-x: hidden;
}
.foto_blok{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
transition: 1s;
}
.foto_blok img{
flex: 0 1 0;
}
.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: 0;
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: 0;
transform: rotate(180deg);
z-index: 10;
}
.hide {
visibility: collapse;
}
.foto:hover .strelka_1, .foto:hover .strelka_2{
opacity: .8;
transition: 1.2s;
}
</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="370" 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="520" 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="420" 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");
const children = foto_blok.children;
const len = children.length - 1;
let index = 0;
const upIndex = up => index = Math.max(0, Math.min(len, index + up));
const move = _ => {
let x = children[index].offsetLeft, max = foto_blok.scrollWidth - foto_blok.clientWidth;
strelka_1.classList.toggle("hide", x && x > max);
strelka_2.classList.toggle("hide", !index);
if(x > max) {index--; };
x = Math.min(x, max);
foto_blok.style.transform = `translateX(${-x}px)`;
}
let slader_2 = () => {
upIndex(-1) ;
move();
}
strelka_2.addEventListener("click", slader_2);
let slader_1 = () => {
upIndex(1);
move();
}
strelka_1.addEventListener("click", slader_1);
window.addEventListener("load", move);
</script>
</body>
</html>
