TheSanches,
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
display: block;
pointer-events: none;
}
.slider-container{
max-width: 1000px;
margin: 0 auto;
overflow: hidden;
}
.slider{
display: flex;
align-items: center;
user-select: none;
transition: all .4s ease-in-out;
transform: translateX(0);
will-change: transform;
}
.slider__item{
flex-shrink: 0;
width: 100%;
height: 300px;
background: rgb(170, 170, 170);
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
line-height: 1;
font-weight: 700;
}
.slider__item:nth-child(even){
background: rgb(123, 122, 122);
}
.arrows{
display: flex;
justify-content: center;
margin-top: 1rem;
}
.arrows__item{
cursor: pointer;
font-size: 3rem;
line-height: 1;
user-select: none;
display: inline-block;
margin: 0 1rem;
}
</style>
<script>
document.addEventListener( "DOMContentLoaded" , function() {
'use strict';
const slider = document.querySelector('.slider'),
items = slider.querySelectorAll('.slider__item'),
len = items.length,
countWidth = items[0].offsetWidth,
arrows = document.querySelector('.arrows');
let count = 0;
arrows.addEventListener('click', ({target}) => {
target = target.closest('.arrows__item');
if(target) {
const up = +target.dataset.up;
count = (count + up + len) % len;
slider.style.transform = `translateX(-${countWidth * count}px)`;
}
});
});
</script>
</head>
<body>
<div class="slider-container">
<div class="slider">
<div class="slider__item">1</div>
<div class="slider__item">2</div>
<div class="slider__item">3</div>
<div class="slider__item">4</div>
</div>
<div class="arrows">
<span class="arrows__item arrows__item_prew" data-up="-1">❰</span>
<span class="arrows__item arrows__item_next" data-up="1">❱</span>
</div>
</div>
</body>
</html>